Navbar總是顯示在旋轉木馬的圖像後面

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 FOR輪轉

<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 
}