これが純粋な CSS で実行できるかどうか、またはこれを行うために jQuery を使用する必要があるかどうかはわかりません。
現在の状態で上から約 400 ピクセルの位置にある div (product_image) があり、相対的に配置されているため、トップ メニューとヘッダーがクリアされます。ユーザーが下にスクロールして上から約 20 ピクセルに到達する必要があります。 divの、divを修正する必要があります。
これが私が試したことです。相対位置のメインdivがあり、固定位置ですべてをラップする別のdivがあります。問題は、div が上から 400px に配置されたままであることです。
コードは次のとおりです。
<div class="product_image">
<div class="product_image_fixed">
<a href="products/1.jpg" class="zoom" title="A bed!" rel="gal1">
<img src="products/1.jpg" width="450" alt="" title="A bed!">
</a>
<ul id="thumblist" class="clearfix" >
<li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'products/1.jpg',largeimage: 'products/1.jpg'}"><img src='products/1.jpg' width="150" height="100"></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'products/1a.jpg',largeimage: 'products/1a.jpg'}"><img src='products/1a.jpg' width="150" height="100"></a></li> </ul>
</div>
</div>
そして、CSS
.product_image {
position: relative;
float: left;
width: 450px;
margin-left: 10px;
margin-top: 10px;
}
.product_image_fixed {
position: fixed;
float: left;
}
質問が十分に明確になったことを願っています。これに対する解決策が見つからないようですので、ご協力をよろしくお願いします。