他の半分のスクロールで半分の列が固定されている

Question

説明するのが難しい方法を理解しようとしています。私はテストを設定しましたhere

あなたがそのサイトにアクセスすると、私は左と右の列を持って表示されます。左の列は定位置に固定され、下にスクロールすると右の列のみがスクロールします。私はこの中にカラフルな画像をいくつか入れて、このことを示しています。

私が右手側でしたいのは、お互いの下に横たわるのではなく、横に2つの画像が並んでいます。これを達成するには、私はできるでしょう

.project { 
    float: left; 
    width: 50%; 
} 

これで、どのように表示するかをイメージで表示します。

ただし、今すぐスクロールすると、以前のように固定されているのではなく、左のセクションが下にスクロールしていることがわかります。

左のセクションを同じに保ちながら、私はどのように変更できますか？

おかげ

Answer 1

を解決する必要があります

.chapter .chapter__title { 
    position: fixed 
} 

に固定し、プロジェクトの写真が含まれているリスト要素のスタイルを変更することができます。

ブラウザ開発ツールを使用してdisplay: inline-block;をリストに追加しました。それはあなたが望む効果のように見えます。

---

EDIT1：私もwidth: 49%;を追加しました。

新しい写真：

---

EDIT2：あなたはそれらのカラフルな箱ものの間にスペースを持っていない必要がある場合は、フレックスを使用すると、それを行うための良い方法です。

親タグ（<ul>）には、行の折り返しを使用してスタイルを追加してフレックスにします。次に、子の幅を50％に設定することができます。

Chromeの開発ツールによると、これはStyles.cssをまわり追加する必要があり、ライン3238.

nav > ol, nav > ul { 
    display: flex; 
    flex: wrap; 
} 

注：これは、少なくとも両方inline-blockとblock子要素のために動作します。

Answer 2

あなたはクラスのタイトル - 固定」を削除して、いくつかのJS持って、それは位置を失うことを意味する、スクロール上の左側のパネルから：固定を。あなたがポジションを追加した場合：代わりに.projectを変更するのかもしれない