私はスクロール時にページの右側にGoogleマップを維持しようとしています

Question

私は3つの列を表示するためにフレックスを使用しています。 1つの列にはフィルタのリストがあり、中央の列にはアイテムのインデックスがあり、右側の列にはマップがあります。下にスクロールすると地図が見えるようになります。私はflexを使用して列を作成しています。私はいろいろな方法で試しましたが、それでも動作させることはできません。

<div class="indexpage"> 
    <div> 
     some code 
    </div> 

    <div> 
     some code 
    </div> 
    <div > 
     <div class="map-position"> 
      <div id="map"></div> 
     </div> 
    </div> 
</div> 

私が下にスクロールすると、3番目のdivが固定されたままになります。私はまた、最初にカバーされていないレイアウトのヘッダーを持っています。

Answer 1

あなたのdivを修正するには、あなたのCSSに "position: fixed;"を追加する必要があります。ここに例があります：

.map-position{ 
position: fixed; no-repeat; 
left: 50%; 
margin-left:60%; 
min-width: 100%; 
min-height: 50%; 
width: auto; 
height: 50%; 
transform: translate(-50%, -50%); 
}