Question

向下滚动时导航出现问题。它将自己置于.post类之后。

向下滚动：

enter image description here

未向下滚动： enter image description here

jQuery的：

var num = $('.header').height();

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('.menu').addClass('fixed-nav');
        $('.wrapper').before($('.menu'));
    } else { 
        $('.menu').removeClass('fixed-nav'); 
        $('.menu-menu-container').prepend($('.menu'));
    }
});

CSS：

.post {
    background: #fff;
    border: 1px solid #ddd;
    font-size: 16px;
}

/* Navigation style */

.nav {
    margin-top: 20px;
    margin: 0 auto;
    width: 60%;
}

.nav ul {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
    font-size: 14px;
    text-align: center;
    background: rgba(255,255,255,0.9);
    border-bottom: 1px rgba(0,0,0,0.1) solid;
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.7;
    text-transform: uppercase; 
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; /* future proofing */
    -khtml-border-radius: 10px; /* for old Konqueror browsers */
}

URL：

http://www.bradlyspicer.net

Answer 1

编辑：

为div＃header {

添加z-index

}

div#header {
z-index: 999;
}

Answer 2

您的堆叠环境已损坏。在Div＃header里面你有nav＃navigation。在div＃header之外你有div＃wrapper。

你不能在nav＃navigation下面使用div #wrapper滚动但在div＃header之上。 div＃wrapper之外的任何元素都位于div＃wrapper及其子元素之上或之下（没有一些重大修改会改变堆栈上下文）。

堆叠顺序并不像“更高的Z-Index = On Top”那么简单。堆叠考虑了元素树中元素的位置，不透明度，定位以及许多其他因素。

Philip Walton wrote a good article about z-index and stacking.

至于解决方案，从div＃header中删除nav＃navigation并将其放入正文中，并添加“position：absolute;”到nav＃navigation元素。结果看起来应该是这样的。

<body>
<div id="header">...</div>
<div id="wrapper">...</div>
<nav id="navigation" style="position:absolute;">...</nav>
</body>

无法让jQuery div坐过包装div

2 个答案: