僅在頁面頂部滾動時顯示標籤

如何檢測用戶是否向下滾動jQuery？我只想要一個固定的div顯示只有當瀏覽器在頂部300像素內。當用戶向下滾動超過300px標記時，它應該消失。當用戶滾動回頂端時，它應該隱藏。我該怎麼做呢？僅在頁面頂部滾動時顯示標籤

來源

2009-08-30 Brandon Wang

從頁面頂部放置不超過300px。你甚至不需要jQuery :-) – edeverett 2009-08-30 21:28:42

我希望它固定在瀏覽器上，所以當你向下滾動時，它看起來很酷：D – 2009-08-30 21:42:34

附加滾動偵聽到窗口： http://docs.jquery.com/Events/scroll

然後檢查窗口的scrollTop的： http://docs.jquery.com/CSS

當scrollTop小於300，show（）div，否則hide（）它。

來源

2009-08-30 21:28:33 Xanthir

請注意，scrollTop不適用於所有瀏覽器。你想爲這個測試使用'window.scrollY'。 – 2010-03-04 00:47:35

var docElem = $(document.documentElement) 
docElem.scroll(function(e) { 
    if(docElem.scrollTop() < 300) { 
     whatever.show(); 
    } else { 
     whatever.hide(); 
    } 
});

您可能必須在不同的瀏覽器中使用不同的元素（如docElem），但這應該在Firefox中起作用。（I沒有測試它）

EDIT：更多的jQuery

來源

2009-08-30 21:27:27 SLaks

我使用了一些你的代碼，謝謝！ – 2009-08-30 21:42:04

那麼爲什麼你不接受它？ – SLaks 2009-08-30 21:43:55

scrollTop和scrollY看起來他們會讓你開始在IE和Firefox。不確定其他瀏覽器。

來源

2009-08-30 21:33:29 edeverett

只需選中窗口scrollTop的上滾動事件位置，並將其與該元素的offsetTop位置比較：

$(window).scroll(function(e){ 
    $el = $('.myElement'); 
    if ($(this).scrollTop() > $el.offset().top){ 
    $el.hide(); 
    } else { 
    $el.show(); 
});

運行這個例子here。

來源

2009-08-30 21:41:36 CMS

僅在頁面頂部滾動時顯示標籤

回答

相關問題