我不确定这是否可以用纯 CSS 完成,或者我是否需要使用一些 jQuery 来完成。
我有一个 div (product_image),在其当前状态下,它位于距顶部约 400px 的位置并相对定位,因此它清除了顶部菜单和标题,我需要做的是当用户向下滚动并达到约 20px 时从 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;
}
我希望我已经把问题说清楚了,我似乎找不到解决这个问题的办法,所以我提前感谢你的帮助!
最佳答案
用于jquery
Jquery
$(document).ready(function() {
var s = $("#sticker");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
CSS
div#wrapper {
margin:0 auto;
width:500px;
background:#FFF;
}
div#mainContent {
width:160px;
padding:20px;
float:left;
}
div#sideBar {
width:130px;
padding:20px;
margin-left:30px;
float:left;
}
.clear {
clear:both;
}
div#sticker {
padding:20px;
margin:20px 0;
background:#AAA;
width:190px;
}
.stick {
position:fixed;
top:0px;
}
HTML
<div id="wrapper">
<div id="mainContent">
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
some content here <br />
</div>
<div id="sideBar">Some content here
<!--Some content in your right column/sidebar-->
<div id="sticker">...This is scroll here </div>
</div>
<div class="clear"></div>
</div>
关于jquery - 滚动距离顶部 20px 时需要修复 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16214796/