滚动一定量后，jQuery 代码在粘贴 div 时无法正常工作

Question

我正在为我创建一个网站，我想要其中的一个 div 滚动一定量然后固定。我可以做那么多，但遇到了一些意想不到的问题。

HTML

<div class="nav">
    Something...
</div>

CSS

.nav
{
position:relative;
width:100%;
padding-left:340px;
background:yellow;
border-bottom:2px solid black;
height:45px;
top:150px;
}
.stick
{
position:fixed;
top:0px;
}
html{height:2000px}

和jQuery

$(document).ready(function() {
var s = $(".nav");
var pos = s.position();                    
$(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    if (windowpos >= pos.top) {
        s.addClass("stick");
    } else {
        s.removeClass("stick"); 
    }
});
});

JSfiddle

http://jsfiddle.net/4J4JE/

请帮助它回到原来的位置，不要滚动得更远，谢谢。

Answer 1

如果你不希望它回到原来的位置，那么删除你的 if (windowpos >= pos.top) 条件的 else 部分，这样当您向上滚动时 stick 类就不会被删除。

$(document).ready(function() {
  var s = $(".nav");
  var pos = s.position();                    
  $(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    if (windowpos >= pos.top) {
      s.addClass("stick");
    }
  });
});

参见 DEMO .