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

编辑：我弄明白了。媒体查询的#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'); 
    } 
});

来源

2014-10-30 Thomas Horner

也许短暂的jsfiddle可以帮助我们解决您的问题。你有没有试过z-index？ – Leto 2014-10-30 20:01:03

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

z-index: 100

将它添加到您的.fixed选择

来源

2014-10-30 20:00:03

我在nav元素上有'z-index：9999'，在其他所有上有'z-index：1'。还是这样。 – 2014-10-30 20:05:26

这没有奏效，但我确实搞清楚了。媒体查询的#main中的'overflow：hidden'使导航消失。 – 2014-10-30 20:14:26

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

回答

相关问题