更改文档滚动上的Div Css

Question

我想在文档滚动时固定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() { to

$(window).scroll(function() > 50 {

和

if (windowpos >= pos.top) {到if (windowpos >= 50) {

这一切似乎都使位置跳跃。请查看下面的JSFiddle

http://jsfiddle.net/uGw2Z/2/

Answer 1

只需添加一个数字，以便删除跳转:windowpos+54

小提琴

Answer 2

您需要像这样更改.box2中的css代码:

.box2{position:fixed; top:50px; margin-left:50px}

查看此文件:JSFIDDLE