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

【问题标题】：jquery scroll to a px count from top and then set a div to be fixed from the top for the rest of the scrolljquery 从顶部滚动到 px 计数，然后将 div 设置为从顶部固定到滚动的其余部分
【发布时间】：2011-06-03 14:54:37
【问题描述】：

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

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

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

有什么想法吗？

【问题讨论】：

标签： jquery css scroll fixed

【解决方案1】：

我刚刚找到this。我认为这真的很有趣；我喜欢它。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可以使用the scroll() event 运行代码，并使用the scrollTop() method 查看您的位置。

这是一个演示： 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() 代码运行次数超过其需要的次数。

【讨论】：

您知道为什么这在 IE8 中不起作用吗？任何可能的解决方案？
@Florian：试试$(window).scroll(... 而不是$(document).scroll(...。

【解决方案4】：

尝试使用 scrollTop：

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

【讨论】：