6

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

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

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

有任何想法吗？

4

4 回答 4

5

您可以使用事件scroll()来运行代码，并使用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()代码运行次数超过所需次数。

于 2011-01-04T20:05:21.350 回答
1

尝试使用滚动顶部：

$(window).scroll(function(){
    if  ($(window).scrollTop() >= 100){
        //CSS changes go here
    }
});
于 2011-01-04T20:05:02.000 回答
0

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

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

于 2012-07-17T19:26:37.867 回答
0

我刚发现这个。我认为这真的很有趣；我喜欢它。

于 2013-08-01T12:31:10.670 回答