Javascript 无法让jQuery div坐在wrap div之上_Javascript_Jquery_Html_Css

Javascript 无法让jQuery div坐在wrap div之上

javascript jquery html css

Javascript 无法让jQuery div坐在wrap div之上,javascript,jquery,html,css,Javascript,Jquery,Html,Css,向下滚动时导航出现问题。它把自己放在了后课堂的后面向下滚动：未向下滚动： jQuery： var num = $('.header').height(); $(window).bind('scroll', function () { if ($(window).scrollTop() > num) { $('.menu').addClass('fixed-nav'); $('.wrapper').before($('.menu'));

向下滚动时导航出现问题。它把自己放在了后课堂的后面

向下滚动：

未向下滚动：

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:

网址：

编辑：

为divheader添加z索引{

}

你的堆叠上下文被破坏了。在Divheader的内部有导航。在divheader之外，您有divwrapper

您不能将divwrapper滚动到navnavigation下方，而是divheader上方。divwrapper之外的任何元素都在divwrapper及其子元素之上或之下，而不需要进行一些改变堆栈上下文的重大修改

堆叠顺序并不像顶部更高的Z指数那样简单。堆叠会考虑元素在元素树中的位置、不透明度、位置和许多其他因素

对于解决方案，从divheader中移除navnavigation并将其放入主体中，并添加位置：绝对；导航到导航元素。结果应该是这样的

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

然后将代码发布到JSFIDLE，这样我就可以调查并修复它，因为我使用Wordpress钩子等等。我在上面添加了URL

div#header {
z-index: 999;
}

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