知道自己位置或窗口滾動位置的DIV？

在jQuery中，你如何做到這一點，所以DIV將保持放置狀態，直到用戶向下滾動使其不再可見爲止（此時它將自己的CSS位置設置爲「固定」）？這是我看到很多的伎倆，只是不知道它是如何完成的。知道自己位置或窗口滾動位置的DIV？

例子：http://www.yelp.com/search?find_desc=sushi&ns=1&find_loc=San+Francisco%2C+CA

2011-06-03 CaptSaltyJack

下面是一些代碼一個簡單的例子：

var standardPosition = $('div').offset().top; 

$(window).scroll(function() { 
    if ($(this).scrollTop() > standardPosition) $('div').css('position','fixed'); 
    else $('div').css('position','relative'); 
});

它來存儲起始位置的地方是很重要的，所以你知道當你遠遠向上滾動足以將其恢復到它在任何位置。

http://jsfiddle.net/qC6HB/

來源

2011-06-03 20:58:35 Robert

要知道，在某些瀏覽器（我looki在您的Internet Explorer中）滾動事件在滾動時不斷觸發。使用像[Ben Alman的Throttle/Debounce]（http://benalman.com/projects/jquery-throttle-debounce-plugin/）這樣的插件可以防止類似的情況發生。 – devmatt 2011-06-03 21:13:11

@devmatt：它不能阻止它，它只是掩蓋它。這可能與設置超時並在每次觸發時清除它相同。超時時間將是他的插件中的「延遲」。 – Robert 2011-06-03 21:27:27

檢查與$(window).scroll()的window的Y位置，一旦到達>比div元素（你可以用offset()得到）的Y位置，您可以更改css來固定。

事情是這樣的：

$(window).scroll(function(e){ 
    var e = $('div').offset(); 
    if ($(window).scrollTop() > e.top){ 
    $('div').css('position','fixed').css('top',0); 
    }else{ 
    $('div').css('position','static'); 
    } 


});

例子：http://jsfiddle.net/niklasvh/HUxVC/

來源

2011-06-03 20:52:27 Niklas

你正在尋找一個粘性滾輪。看看這個：jQuery Sticky Scroller/Position:Fixed Plugin

Simple Demo

來源

2011-06-03 20:56:43

知道自己位置或窗口滾動位置的DIV？

回答

相關問題