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(); 
});