滚动导航栏在其他部分下消失答案

【问题标题】：Scrolling nav bar disappears under other sections滚动导航栏在其他部分下消失
【发布时间】：2014-10-31 04:14:59
【问题描述】：

编辑：我确实想通了。媒体查询的#main 中的“溢出：隐藏”使导航消失。

我的页面顶部有一个滚动导航，但是当我向下滚动页面时，导航栏位于下一部分下方，不再显示。它并不总是这样做，只有当我添加我的手机和平板电脑媒体查询时。如果我删除媒体查询样式表，导航栏就可以正常工作。

HTML

<section id="main">
<nav>   
    <a href="#about">About</a> 
    <a href="#motorcycles">Motorcycles</a> 
    <a href="#coffee">Coffee</a> 
    <a href="#contact">Contact</a> 
</nav>
<h1>Kickstart Cafe</h1> <h2>Coffee shop for the motorcycle enthusiast</h2>

来自媒体查询的 CSS

    small phone screen
nav {
    display:none;
}
#main {
    /*background-image: url('../img/beans.jpg');    */
    background-repeat:repeat;
    height:400px;
    overflow:hidden;
    h1 {
        font-size:3.25em;
        position:relative;
        padding-top:35%;
    }
    h2 {
        font-size:1.17em;
    }

}

desktop
@import 'styles';
#main {
    h2 {
        font-size:2.75em;
    }
}
nav {
    z-index:9999 !important;
}

主样式表中的 CSS

#main {
margin:0;
padding:0 0 15% 0;
width:100%;
height:auto;
-moz-box-shadow: inset  0 -20px 10px -15px #000;
-webkit-box-shadow: inset  0 -20px 10px -15px #000;
box-shadow:   inset  0 -20px 10px -15px #000;
nav {
    text-align:right;
    width:100%;
    height:50px;
    z-index:9999;
    position:relative;
    top:20px;
    a {
        color:#fff;
        font-size:2em;
        text-decoration:none;
        margin: 0 15px;
    }
}
}
.fixed {
    position:fixed;
    background:rgba(0,0,0,.6);
    top:0;
    a {
        color:#fff !important;

    }
}

jQuery

    $(window).scroll(function () {
if ($(window).scrollTop() > 100) {
    $('nav').css('top', $(window).scrollTop());
    $('nav').addClass('fixed');
     } else {
        $('nav').css("top", "20px");
        $('nav').removeClass('fixed');
     }
});

【问题讨论】：

也许一个简短的 jsFiddle 可以帮助我们解决您的问题。你试过 z-index 吗？

标签： jquery html css sass

【解决方案1】：

答案很简单。只需使用z-index CSS 属性即可。

z-index: 100

将其添加到您的 .fixed 选择器

【讨论】：

我在导航元素上有 'z-index: 9999' 和所有其他元素上的 'z-index:1'。还是这样。
这不起作用，但我确实想通了。媒体查询的#main 中的“溢出：隐藏”使导航消失。