javascript - 静态定位菜单和 z-index 问题，需要保留我的 jquery 动画

Question

我制作了一个完美的菜单，唯一的问题是我的子菜单将位于我网站上的特定元素下。这是因为我的菜单定位为“静态”，所以我的 z-index 不适用于我的 .sub-menu(子菜单)。

我不想做的是浏览我的网站并将各种元素设置为具有 -1 或类似值的 z-index。

我还需要做的是保留我的 jQuery 上/下滑动动画。

我尝试用相对而不是静态来定位我的菜单，但我的 jQuery 动画有一些问题。我也尝试过将顶级 div 置于所有内容之上，但仍然没有运气 - 无论如何有这个吗？我该怎么办，我很难过。

HTML:

<div class="nt-main-navigation">
  <div class="nt-main-nav-animation">
    <div class="container">
      <div class="nt-main-navigation-wrapper clearfix">

            <!-- My menu, submenu (theproblem), logo, etc in here -->

      </div>
    </div>
  </div>
</div>

CSS:

/* Header Style 1 */

.activeScroll .nt-main-navigation {
    position: fixed;
    top: 0;
    left: 0;
}

.nt-main-navigation {
    -webkit-transition: top 500ms ease;
    -moz-transition: top 500ms ease;
    -ms-transition: top 500ms ease;
    -o-transition: top 500ms ease;
    transition: top 500ms ease;
    position: static;

   /* fix laggy transition */
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
}

.nt-main-nav-animation {
    position: relative;
}

JS:

// HEADER STYLE 1

// get header height
var getHeaderHeight = $('.nt-main-navigation').outerHeight();
var getToolbarHeight = $('.nt-toolbar-wrap').outerHeight();

// init last scroll position
var lastScrollPosition = 0;

// set container top property on page load with static position
$('.nt-main-navigation').css('top', '-' + getHeaderHeight + 'px');

$(window).scroll(function() {
    var currentScrollPosition = $(window).scrollTop();

    // At +100px menu slides down page
    if($(window).scrollTop() > getHeaderHeight + getToolbarHeight + 100) {

        $('body').addClass('activeScroll').css('padding-top', getHeaderHeight);
        $('.nt-main-navigation').css('top', 0);

        if(currentScrollPosition < lastScrollPosition) {
            $('.nt-main-navigation').css('top', '-' + getHeaderHeight + 'px');
        }

        lastScrollPosition = currentScrollPosition;

    } else {
        $('body').removeClass('activeScroll').css('padding-top', 0);
    }
});

非常感谢任何帮助，谢谢。

Answer 1

如果没有演示或代码笔，真的很难说出发生了什么，但这是我的想法。

z-index 只影响位置值other不是静态的元素。您似乎没有在 .nt-main-navigation 类上设置任何内容。我会尝试添加以下内容:

.nt-main-navigation {position:relative; z-index:500;}

现在，position:relative; 实际上不会做任何事情除非设置了顶部、左侧、底部等值。