如何使用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隐藏导航栏？

回答

相关问题