Question

编辑：我确实搞清楚了。媒体查询的#main内的'overflow：hidden'使导航消失。

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

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');
     }
});

Answer 1

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

z-index: 100

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

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

1 个答案: