javascript - 导航栏始终显示在轮播图像后面

Question

我试过使用 z-index，这样我的导航栏就会出现在我的旋转木马图片上……但无济于事。我认为它不起作用的原因是因为它不是静态的。

我的设置方式是，当用户向下滚动时，导航栏逐渐消失，当用户向上滚动时，导航栏逐渐出现。这是否会干扰 z-index.. 我不确定。非常感谢任何帮助。

以下是我的 导航栏 HTML:

<header class="nav-down">
<div class="navbar navbar-default navbar-fnt navbar-backgrnd center">
  <div class="container-fluid navbar-inner">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">SMcD</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Photos</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Me
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Seanie Mc</a></li>
          <li><a href="#">Contact Me</a></li>
        </ul>
      </li>
      <li><a href="#">Blog</a></li>
    </ul>
  </div>
</div>

以下是我的轮播HTML

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<div class="carousel-inner" role="listbox">
  <div class="item active">
    <img src="{% static 'personal/img/seanie1.jpg' %}" alt="Chania">
  </div>

  <div class="item">
    <img src="{% static 'personal/img/seanie2.jpg' %}" alt="Chania">
  </div>

  <div class="item">
    <img src="{% static 'personal/img/seanie3.jpg' %}" alt="Flower">
  </div>
</div>

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>

<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>
</div>

CSS 比我提供的要多得多。但剩下的主要是改变点击导航栏上的元素时显示的颜色等......

以下是我的CSS:

.navbar{
  z-index: 2;
}

.carousel-inner{
  z-index: 1;
}

以下是我的JS:

  $(document).ready(function() {
    $("#myCarousel").carousel();

    $(".item").click(function(){
      $("#myCarousel").carousel(1);
    });

    $(".left").click(function(){
      $("#myCarousel").carousel("prev");
    });
  });

  var didScroll;
  var lastScrollTop = 0;
  var delta = 5;
  var navbarHeight = $('header').outerHeight();

  $(window).scroll(function(event){
      didScroll = true;
  });

  setInterval(function() {
      if (didScroll) {
          hasScrolled();
          didScroll = false;
      }
  }, 250);

  function hasScrolled() {
      var st = $(this).scrollTop();
      if(Math.abs(lastScrollTop - st) <= delta) {
          return;
      }
      if (st > lastScrollTop && st > navbarHeight)  {
          $('header').removeClass('nav-down').addClass('nav-up');
      } else {
          if(st + $(window).height() < $(document).height()) {
              $('header').removeClass('nav-up').addClass('nav-down');
          }
      }
      lastScrollTop = st;
  }

Answer 1

要在顶部显示导航栏，请提供比轮播更高的 z-index。

header {
  z-index: 100
}