Javascript 更改文档滚动上的Div Css

我想在文档滚动时固定div的位置，并且div从顶部达到50px

请检查下面的代码

HTML

JS

及

if（windowpos>=pos.top）{

到

if（windowpos>=50）{

这一切似乎使位置跳跃。请检查下面的JSFIDLE

---

如果有人能给我指出正确的方法，我会非常合适。

您需要更改

.box2

中的css代码，如下所示：

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

---

查看此提琴：

只需添加一个数字即可删除跳转：

windowpos+54

---

像这样输出：？@Zword谢谢，这很好用。如果你能把它作为答案添加进来，我可以选择它作为正确的答案，让其他人看到。太棒了。工作得很有魅力。

#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; }  

$(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");
        }
    });

});

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

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