jQuery .hide（）滾動位置

我想在我的單頁網站的第一部分隱藏Bootstrap-Navbar，並在滾動過去第一部分時將其淡入。jQuery .hide（）滾動位置

我試過使用jQuery .hide（）效果，告訴它在scrollTop爲< 300px時隱藏導航欄，並在下面淡入淡出 - 此工作正常，但第一次頁面加載導航欄時不會隱藏，我第一次向下滾動，我無法弄清楚爲什麼。

這裏是我的代碼：

$('#wrapper').scroll(function(){ 
if($(this).scrollTop() < 300) $('#navbar').hide('easing'); 
if($(this).scrollTop() > 300) $('#navbar').fadeIn('slow'); 
});

這裏是jsfiddle

我怎樣才能做到這一點？

來源

2014-03-19 MarcL

-1

嘗試用這種

HTML

<div id="navbar" style="display:none">Teasers Div</div>

腳本

$(document).ready(function() { 
    $('#wrapper').scroll(function(){ 
    if($(this).scrollTop() > 300) 
    $('#navbar').fadeIn('slow'); 
    else 
    $('#navbar').hide('easing'); 
    }); 
});

DEMO

來源

2014-03-19 11:06:00

這將調用'每次'＃wrapper'元素滾過300像素時間fadeIn'。 –

所以我想我的問題是，我只使用.hide（）只有當我滾動和你的行動直接打開文檔時加載 - 哇，這是一個簡單的解決方案：D 謝謝！ – MarcL

@ user3037063很高興幫助你.. !!如果它的幫助在一段時間後回覆upvote –

我認爲這是監守的#navbar元素最初沒有隱藏。

只是隱藏它使用CSS：

#navbar { 
    height:50px; 
    background-color:green; 
    position:fixed; 
    top:20px; 
    width:100%; 
    display: none; 
}

演示：http://jsfiddle.net/Ub4xm/17/

來源

2014-03-19 11:07:24

你應該設置欄隱藏在啓動時，無論是在CSS（清潔）或HTML（快速和骯髒的）。

如果我是正確的，jQuery的.hide（）會將顯示設置爲「none」，因此.fadeIn（）會將顯示設置爲「block」，因此將頁面加載的顯示設置爲「none」。

來源

2014-03-19 11:07:40

是的，謝謝！ – MarcL

外接顯示器無法比擬的：

#navbar { 
    height:50px; 
    background-color:green; 
    position:fixed; 
    top:20px; 
    width:100%; 
    display:none; /* <--add this*/ 
}

或在你的js可以觸發在文檔準備好您的.scroll()：

$(document).ready(function() { 
    $('#wrapper').scroll(function() { 
    if ($(this).scrollTop() < 300) { 
     $('#navbar').hide('easing'); 
    } else if ($(this).scrollTop() > 300) { 
     $('#navbar').fadeIn('slow'); 
    } 
    }).scroll(); // <-----trigger it here first. 
});

上面的代碼讓你看到隱藏與當文檔是緩解準備。

來源

2014-03-19 11:09:11 Jai

第一次在加載時隱藏#navbar。

$(document).ready(function() { 

    $('#navbar').hide(); 

    $('#wrapper').scroll(function(){ 
     if($(this).scrollTop() < 300) $('#navbar').hide('easing'); 
     if($(this).scrollTop() > 300) $('#navbar').fadeIn('slow'); 
    }); 
});

demo

來源

2014-03-19 11:14:24

jQuery .hide（）滾動位置

回答

相關問題