jquery从顶部滚动到一个px计数，然后设置一个div以从顶部固定滚动的其余部分

Question

当我滚动到页面下方的某个点（距页面顶部一定数量的像素）时，我希望更改 div 的 css。

在页面加载时，我将有一个静态定位的 div。当我开始向下滚动页面并从顶部点击一个点（出于演示目的，例如 100px）时，我想将该静态 div 更改为固定的，例如距离顶部 20px。这可以通过 jquery 的 css() 属性来完成。这将允许它在页面下方一直保持固定的 20px。

当我达到 100px 标记时，我可以使用什么 jquery 属性来知道。我希望一旦有人回到顶部，它也能恢复，以便 div 被放回到页面加载时的位置，而不是距离顶部 20px。

有什么想法吗？

Answer 1

您可以使用 scroll() 事件 来运行代码，并且 < a href="http://api.jquery.com/scrolltop" rel="noreferrer">scrollTop() 方法 查看您所在的位置。

这是一个演示： http://jsfiddle.net/EahRx/

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

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'});
        }
    }
});

fixed 变量会阻止 .css() 代码运行次数超过其需要的次数。

Answer 2

尝试使用scrollTop：

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

Answer 3

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

http://code.google.com/p/sticky-panel/

Answer 4

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