jquery .scroll 更改 css

Question

我对 jquery 很陌生，并且在更改滚动效果的 css 样式方面遇到了一些问题。

我有一个 div，在页面加载时我想将其固定为 top:75px，但是一旦用户开始从顶部滚动超过 75px，我想将其更改为position:fixed top: 0px。

现在我只能让它在任何滚动操作上改变，而不是等到它从顶部达到 75px。

到目前为止，我的代码非常基础，因为我有点卡在这个特定的部分上。

        $(window).scroll(function () { 
              $("#side_bar").css("position", "fixed").css("top", "0px"); 

            });

理想情况下，我真的希望它可以滚动，直到 #side_bar 的底部接触页脚，然后在从顶部滚动回 75px 时反转整个事情，以便它变回位置：静态，顶部：75px。

提前致谢！

Answer 1

jQuery Waypoints 插件可让您轻松制作粘性元素。他们通过在滚动到该元素时添加一个 Sticky 类（导致该元素被固定）来实现该示例。

Answer 2

这样的东西会为你做到这一点。请注意，与您的问题不同，您实际上并不希望将其固定为 75px。如果发生这种情况，它永远不会滚出屏幕！你希望它是相对的，然后一旦它离开屏幕就固定下来。

//get the top of your sidebar based on its default position
var topOfSidebar = $("#sidebar").offset().top;

//when the window scrolls check to see whether it is about to go off screen. If so then switch to fixed.       
$(window).scroll(function() {
    var topOfWindow = $(window).scrollTop();
    if (topOfSidebar < topOfWindow) {
        $("#sidebar").addClass("sidebar2");          
    }
    else {
        $("#sidebar").removeClass("sidebar2");
    }
});

Answer 3

这是另一个处理此问题的 jquery 插件的演示。该演示使用浮动在右侧的购物车摘要，该摘要会滚动直至到达页面顶部的边缘。该插件的描述如下：

该插件用于将元素固定在页面顶部，如果元素垂直滚动到视图之外；但是，它确实允许元素随着水平滚动继续向左或向右移动。

给定一个选项 marginTop ，一旦垂直滚动到达目标位置，元素将停止垂直向上移动；但是，当页面向左或向右滚动时，元素仍会水平移动。一旦页面向下滚动超过目标位置，该元素将恢复到其在页面上的原始位置。

该插件已在 Firefox 3/4、Google Chrome 10/11、Safari 5 和 Internet Explorer 8/9 中进行了测试。

演示：http://jsfiddle.net/y3qV5/

插件和源：https://github.com/bigspotteddog/ScrollToFixed

用法：

$(document).ready(function() {
    $('#cart').scrollToFixed();
});