jquery从顶部滚动到px计数，然后在滚动的其余部分从顶部将div设置为固定

当我滚动到页面下方的某个点，即页面顶部的某个像素量时，我希望更改div的css

在页面加载时，我将有一个静态定位的div。一旦我开始向下滚动页面，并从顶部点击一个点（比如说100px用于演示目的），我想将静态div更改为固定的，就像从顶部点击20px一样。这将通过jquery的css（）属性完成。这将允许它在整个页面中保持固定的20px

当我达到100px标记时，我可以使用什么jquery属性来知道。我希望在有人回到顶部时也能恢复，这样div就会回到页面加载时的位置，而不是从顶部开始的20px

有什么想法吗？

尝试使用scrollTop：

$(window).scroll(function(){
    if  ($(window).scrollTop() >= 100){
        //CSS changes go here
    }
});

您可以使用来运行代码，并查看您的位置

这里有一个演示：

（我使用了您提供的值，因此有一个跳转。我相信它在您的实际页面中会看起来更好。）

---

fixed

变量可以防止

.css（）

代码运行的次数超过它需要的次数。

我发现了一个可爱的jQuery插件，它很好地解决了这个问题，并为您提供了一些有用的附加功能，例如设置偏移量以及在“附加”和“分离”模式之间更改css

---

我刚找到。我觉得这真的很有趣；我喜欢它。

你知道为什么这在IE8中不起作用吗？任何可能的解决方案？@Florian:尝试

$（窗口）。滚动（…

而不是

$（文档）。滚动（…

）。

var fixed = false;

$(document).scroll(function() {
    if( $(this).scrollTop() >= 100 ) {
        if( !fixed ) {
            fixed = true;
            $('#myDiv').css({position:'fixed',top:20}); // Or set top:20px; in CSS
        }                                           // It won't matter when static
    } else {
        if( fixed ) {
            fixed = false;
            $('#myDiv').css({position:'static'});
        }
    }
});