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

Question

当我滚动到页面的某个点时,我想要更改div的css,从页面顶部开始有一定数量的像素.

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

我可以使用什么jquery属性来知道我何时达到100px标记.一旦有人回到顶部,我希望这也恢复,以便div被放回到页面加载时的位置,而不是从顶部开始的20px.

有任何想法吗？

Answer 1

您可以使用该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()代码运行的次数超过其所需的次数.