Question

我试图使用Jquery隐藏页脚下的导航。

我的意思是，我想展示导航直到它到达页脚阶段。然后，我想隐藏它。

我该怎么办？或者我应该在jquery的状态下使用z-index？

代码和示例：http://jsfiddle.net/yn8r4/1/

我会感激任何帮助。谢谢！

注意

我在Jquery的导航中添加了一个FIXED位置，我确实需要该网站看起来像：http://jsfiddle.net/yn8r4/1/而不是像这里：http://jsfiddle.net/yn8r4/14/

直播示例

我找到了一个实际的例子，说明我要做的事情Here

当您向下滚动时，您会看到左侧的导航。相信，他正在使用z-index。是吗？

谢谢

Answer 1

你不需要jQuery。在CSS中，您可以将#navigation的z-index属性设置为小于#footer的z-index属性。

Answer 2

我认为这就是你想要的：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();
    }
});

Answer 3

我同意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>

如何用Jquery隐藏导航栏？

3 个答案: