滾動頁面後改變元素的css位置

Question

我正在搞亂一些jquery，試圖去處理它。

我有一個ul導航，它有一個絕對位置設置，但在我向下滾動頁面200個像素後，我希望切換到固定位置，以便導航總是停留在頁面上。

我該怎麼做？

下面

是我在

http://satbulsara.com/tests/

Answer 1

感謝大家這麼快幫

這就是我想要的

$(document).ready(function() { 
    var theLoc = $('ul').position().top; 
    $(window).scroll(function() { 
     if(theLoc >= $(window).scrollTop()) { 
      if($('ul').hasClass('fixed')) { 
       $('ul').removeClass('fixed'); 
      } 
     } else { 
      if(!$('ul').hasClass('fixed')) { 
       $('ul').addClass('fixed'); 
      } 
     } 
    }); 
}); 

我從

http://www.defringe.com/

http://satbulsara.com/tests/

Thankss明白了！ ！

Answer 2

工作下面是我用它來創建一個「粘」側邊欄的代碼的例子。您需要修改ID以符合您的標記。

 
var sidebarScrollTop = 0; 

$(document).ready(function() { 
    sidebarScrollTop = $("#sidebar").offset(); 

    $(window).scroll(function() { 
     var docScrollTop = $('body,html').scrollTop(); 

     if(docScrollTop > sidebarScrollTop.top) { 
      $("#sidebar").css({ position: 'fixed', top: '0px' }); 
     } else { 
      $("#sidebar").css({ position: 'static' }); 
     } 
    }); 
}); 

$(window).resize(function() { 
    sidebarScrollTop = $("#sidebar").offset().top; 
}); 

$(document).resize(function() { 
    sidebarScrollTop = $("#sidebar").offset().top; 
}); 

基本上，所有你需要做的是改變#sidebar邊欄容器的ID。此代碼將查看側邊欄元素是否滾動經過屏幕頂部。如果是，則將其位置更改爲fixed，並且當它再次返回到頁面上時，位置將返回到static（默認值）。

$(document).resize()和$(window).resize()功能將確保當文檔/窗口分別調整大小時，側邊欄在頁面頂部保持粘貼狀態。文檔功能將確保側欄工作正常，即使你有jQuery動畫改變元素的大小。

Answer 3

我寫this jQuery plugin就是這麼做的。