滾動摺疊後自舉3修復

Question

我面臨Bootstrap 3的問題。我有一個頁面導航的部分和滾動導航欄後的修復。當它滾動時，導航欄被固定並改變背景顏色。但是，當涉及到小屏幕導航欄不崩潰，它不保持固定。

這是html的一部分。

<div class="navigate clearfix"> 
     <div class="inner"> 
      <h3 class="navigate-brand">Brand</h3> 
      <nav class="navbar" role="navigation">  
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" > 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
      </div> 

      <div class="navbar-collapse collapse" id="menu"> 
      <ul class="nav navigate-nav menu-right" > 
       <li class="active"><a href="#top">Home</a></li> 
       <li><a href="#s1">s1</a></li> 
       <li><a href="#s2">S2</a></li> 
       <li><a href="#s3">s3</a></li> 
       <li><a href="#s4">s4</a></li> 
      </ul> 
      </div> 
      </nav> 
     </div> 
    </div> 

與背景變化的JS：

$(document).ready(function(){ 
    $(window).scroll(function(){ 
     if($(window).scrollTop() > $(window).height()){ 
      $(".navigate").css({"background-color" : "red"});     
     }else{ 
      $(".navigate").css({"background-color":"transparent","background":"transparent"}); 
     } 
    }) 

}) 

Answer 1

您可能需要按照指示：基於上述https://getbootstrap.com/components/#navbar

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    ... 
    </div> 
</nav> 

，我已經準備了小提琴爲你導航欄保持固定在任意給定的屏幕寬度：http://jsfiddle.net/dmv73fzr/

希望它可以幫助你！