如何使用Jquery隱藏導航欄？

我想隱藏使用Jquery的頁腳下的導航。如何使用Jquery隱藏導航欄？

我的意思是，我想顯示導航，直到它到達頁腳階段。然後，我想隱藏它。

我該怎麼辦？或者我應該使用jQuery的狀態z-index？

碼，例如：http://jsfiddle.net/yn8r4/1/

我希望任何形式的幫助。謝謝！

注意

我加入一個固定位置使用jQuery導航和我需要的網站看起來像：http://jsfiddle.net/yn8r4/1/，而不是像在這裏：http://jsfiddle.net/yn8r4/14/

活生生的例子

我發現了一個我想要做的事情的實例Here

向下滾動時，您會看到左側的導航。相信，他正在使用z-index。是他？

謝謝

來源

2010-09-24 Martin

你是什麼意思將它隱藏在「頁腳下」？如果它隱藏起來，它在哪裏？ – Jeremy 2010-09-24 15:36:01

@Jeremy我編輯了它。我希望它更有意義。 – Martin 2010-09-24 15:42:53

它有固定的原因嗎？如果你只是把它漂浮在內容區旁邊並清除它，它會在你點擊頁腳之前停止。 – 2010-09-24 15:45:44

你不需要這個jQuery。在CSS中，您可以將#navigation的z-index屬性設置爲小於#footer的z-index屬性。

來源

2010-09-24 15:46:12 Jeremy

我同意傑里米，jQuery是不需要的。這是一個簡單的CSS解決方案。

根本不需要使用z-index。刪除導航欄上的絕對位置並將其左移浮動內容。 Can be seen here

CSS

#navigation { float:left;width:140px;height:300px; background-color:#E5450F;} 
#navigation p {text-align:center;} 

#content {height:300px;width:400px;background-color:#ddd;margin-bottom:10px;float:left;} 


#footer {height:300px;width:auto;position:relative;z-index:0;background-color:#5F93AB;margin:;padding:0;text-align:center;} 

#footer_b {height:300px;width:300px;background-color:#000;position:relative;z-index:0;color:#fff;}

HTML

<div id="content"> 
    <p>Content</p> 
    <p style="font-size:0.8em;"> * Thanks for your help *</p> 
</div> 
<div id="navigation"> 
    <p>Navigation</p> 
    <p style="font-size:0.8em;"> * Hide me under footer *</p> 
    <p style="font-size:0.8em;margin-top:230px;"> * Hide me *</p> 
</div> 
<div style="clear:both"></div> 
<div id="footer"> 
    <p>Footer</p> 
</div> 

<div id="footer_b"> 
    <p>Footer_b</p> 
</div>

來源

2010-09-24 15:51:40

這是一個更簡單的設計。 – Jeremy 2010-09-24 16:05:01

不是他要求的 – 2010-09-24 16:35:34

我認爲這是你要什麼：http://jsfiddle.net/AqeXd/1/

var top = $('#navigation').offset().top - parseFloat($('#navigation').css('margin-right').replace(/auto/, 0)); 
var contentBottom = $("#content").height() + top; 

$(window).scroll(function() { 

    var y = $(window).scrollTop(); 
    if (y >= top) { 
     $('#navigation').addClass('fixed'); 
    } else { 
     $('#navigation').removeClass('fixed'); 
    } 

    var navBottom = top + $("#navigation").height() + y; 

    if (navBottom > contentBottom) { 
     $("#navigation").hide(); 
    } else { 
     $("#navigation").show(); 
    } 
});

來源

2010-09-24 16:14:03

p.s.可能要考慮將$（「＃navigation」）賦值給一個變量，所以你不需要繼續選擇它。 – 2010-09-24 16:14:49

是的，它非常接近我所尋找的！但我需要在頁腳下一點一點地隱藏導航。我應該使用fadeIn嗎？謝啦！ – Martin 2010-09-24 16:19:47

如何使用Jquery隱藏導航欄？

回答

相關問題