我想在文档滚动时div的位置固定,并且该div从顶部到达50px。
请检查下面的代码
的HTML
<div id="main">
<div id="nav"></div>
<div id="left"></div>
<div id="right">
<div id="box1"></div>
<div id="box2"></div>
</div>
</div>
的CSS
#main{ overflow:hidden; width:600px; height:900px; background:#afaaac; margin:0; padding:0; }
#nav{ width:600px; height:40px; background:#15bc44; position:fixed; margin:0; padding:0;}
#left{ overflow:hidden; width:400px; height:900px; background:#18769e; float:left; }
#right{ overflow:hidden; width:200px; height:900px; background:#bc1544; float:right; }
#box1{ float:right; width:150px; height:200px; display:block;background:#e34d2a; margin-bottom:20px; }
#box2{ float:right; width:150px; height:200px; display:block;background:#e34d2a; margin-bottom:20px; }
.box2{ position:fixed; margin-left:50px; margin-top:50px; }
JS
$(document).ready(function() {
var s = $("#box2");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop() ;
//s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
if (windowpos >= pos.top) {
s.addClass("box2");
} else {
s.removeClass("box2");
}
});
});
这项工作,但它将转到文档顶部并跳回50px。
我也尝试改变
$(window).scroll(function() {
至$(window).scroll(function() > 50 {
和
if (windowpos >= pos.top) {
至if (windowpos >= 50) {
这一切似乎使职位跳来跳去。请检查下面的JSFiddle
http://jsfiddle.net/uGw2Z/2/
如果有人能指出正确的方法,我将非常适合。
最佳答案
只需添加一个数字即可删除跳转:windowpos+54
Fiddle