jquery .scroll更改css

Question

我对jquery很新，并且对于更改滚动效果的css样式有点问题。

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

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

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

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

      }); 

理想我真的很喜欢，直到#side_bar底部触及页脚，然后反向滚动备份从顶部960x75像素的时候，整个事情，使其变回位置，它是滚动：静态，顶部：75px。

在此先感谢！

Answer 1

jQuery Waypoints插件让你轻松制作sticky elements。他们通过在滚动到该元素时添加sticky类（使元素固定）来实现该示例。

Answer 2

东西like this会为你做。请注意，与你的问题不同，你实际上并不希望它固定在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(); 
});