導航欄固定頂部頁閃爍，我被迫頂部

我特別使用Bootstrap 3，navbar-fixed-top類。我有兩個菜單，我使用JQ將其固定在頂部，如下所示。我只在短頁面上看到一個奇怪的錯誤 - 只有當頁面高度爲幾乎與頁面內容一樣長時：當我嘗試滾動時，頁面閃爍並且我被迫回到頂部。這發生在手動滾動或使用滾輪時。結果，我永遠無法看到最後一條版權線。 See video of this。導航欄固定頂部頁閃爍，我被迫頂部

編輯：當我刪除這條線$('nav').addClass('navbar-fixed-top');問題消失（但顯然我需要那條線）。我該如何解決？

此外，當navbar-fixed-top類適用於導航，滾動發生順利（因此，我沒有看到長頁面上的錯誤）。當它沒有被應用 - 錯誤回來了。

var navFixStart; 
 
var subFixStart; 
 
var xs = 480; 
 
var lg = 1200; 
 
var mobileStart = (992 - 15); 
 

 
if ($('body').hasClass('min')) { 
 
    navFixStart = 40; 
 
    subFixStart = 40; 
 
} else { 
 
    navFixStart = 0; 
 
    subFixStart = 160; 
 
} 
 

 
$(document).ready(function() { 
 

 
    $(window).scroll(function() { 
 

 
    if ($(window).width() < mobileStart) { 
 
     // stuff 
 
    } else { 
 
     if ($(window).scrollTop() > navFixStart) { 
 
     $('nav').addClass('navbar-fixed-top');  // problem line 
 
     } else { 
 
     $('nav').removeClass('navbar-fixed-top'); 
 
     } 
 
    } 
 
    }); 
 

 
    $(window).on('load resize', function() { 
 
    if ($(window).width() < mobileStart) { 
 
     //mobile stuff 
 
    } else { 
 
     $('nav').removeClass('navbar-inverse').removeClass('navbar-fixed-top'); 
 
     $('nav>div').removeClass("container-fluid").addClass("container"); 
 
     if ($(window).scrollTop() > navFixStart) { 
 
     $('nav').addClass('navbar-fixed-top'); 
 
     } else { 
 
     $('nav').removeClass('navbar-fixed-top'); 
 
     } 
 
    } 
 
    }); 
 
});

/* Nav */ 
 

 
nav { 
 
    border: none !important; 
 
    padding-top: 15px; 
 
    z-index: 1000; 
 
    -webkit-transition: 0.3s all ease; 
 
    -moz-transition: 0.3s all ease; 
 
    -ms-transition: 0.3s all ease; 
 
    -o-transition: 0.3s all ease; 
 
    transition: 0.3s all ease; 
 
} 
 
nav div>ul>li>a:link { 
 
    padding: 20px; 
 
} 
 
nav.navbar-fixed-top { 
 
    background-color: rgba(244, 242, 239, 0.95); 
 
} 
 
nav.navbar-fixed-top.shad-bottom, 
 
.subnav { 
 
    box-shadow: 0 3px 5px rgba(0, 0, 0, .1); 
 
} 
 
.navbar-brand { 
 
    width: 145px; 
 
    margin-left: 15px; 
 
    margin-top: -5px; 
 
} 
 
.navbar-fixed-top .navbar-brand { 
 
    width: 115px; 
 
} 
 
.navbar-fixed-top { 
 
    margin-top: 0 !important; 
 
    padding-top: 0 !important; 
 
} 
 
.navbar-fixed-top .navbar-brand>img { 
 
    height: auto; 
 
} 
 
.navbar-fixed-top .navbar-brand { 
 
    margin-top: 5px; 
 
} 
 
.navbar-toggle { 
 
    padding: 9px; 
 
} 
 
.navbar-toggle .icon-bar { 
 
    width: 20px; 
 
} 
 
nav .dropdown .dropdown-menu { 
 
    border: 0; 
 
} 
 
nav .dropdown .dropdown-menu a:link { 
 
    line-height: 32px; 
 
} 
 
nav .navbar-collapse { 
 
    padding: 0; 
 
} 
 
nav .navbar-collapse.collapsing, 
 
nav .navbar-collapse.in { 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
} 
 
.navbar-collapse .nav { 
 
    position: relative; 
 
    top: -7px; 
 
} 
 
.navbar-fixed-top .navbar-collapse .nav { 
 
    position: static; 
 
} 
 
.navbar-nav>li>.dropdown-menu { 
 
    margin-top: 7px; 
 
} 
 
.navbar-fixed-top .navbar-nav>li>.dropdown-menu { 
 
    margin-top: inherit; 
 
}

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="css/style.css" rel="stylesheet"> 
 
</head> 
 

 
<body class="top" ontouchstart=""> 
 
    <nav class="navbar navbar-default shad-bottom"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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 id="navbar" class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Option</a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="">Option</a> 
 
       </li> 
 
       <li><a href="">Option</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Option</a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="">Option</a> 
 
       </li> 
 
       <li><a href="">Option</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Option</a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="">Option</a> 
 
       </li> 
 
       <li><a href="">Option</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Option</a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="">Option</a> 
 
       </li> 
 
       <li><a href="">Option</a> 
 
       </li> 
 
       <li><a href="">Option</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Option</a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="">Option</a> 
 
       </li> 
 
       <li><a href="">Option</a> 
 
       </li> 
 
       <li><a href="">Option</a> 
 
       </li> 
 
       <li><a href="">Option</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="">Support</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
    <div class="container-fluid intro"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="no-pad"> 
 
      <h1><a href="">Support</a></h1> 
 
     </div> 
 
     </div> 
 
     <!-- end row --> 
 
    </div> 
 
    <!-- end container --> 
 
    </div> 
 
    <!-- end container-fluid --> 
 

 
    <div class="container-fluid block"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-offset-2 col-md-8"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet blandit lectus, quis auctor ante posuere sit amet. Fusce venenatis, arcu non viverra pulvinar, augue metus laoreet leo, sed convallis orci nisi vitae turpis. Cras sed euismod 
 
      ligula. Sed id nulla elit. Aenean dapibus condimentum ex nec fermentum. Aliquam accumsan velit in dui sagittis cursus. Vestibulum id scelerisque risus, at efficitur turpis. 
 
      <p> 
 
     </div> 
 
     <!-- end col --> 
 

 
     </div> 
 
     <!-- end row --> 
 
    </div> 
 
    <!-- end container --> 
 
    </div> 
 
    <!-- end container-fluid --> 
 

 
    <div class="container-fluid block block-dark"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-offset-2 col-md-8"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet blandit lectus, quis auctor ante posuere sit amet. Fusce venenatis, arcu non viverra pulvinar, augue metus laoreet leo, sed convallis orci nisi vitae turpis. Cras sed euismod 
 
      ligula. Sed id nulla elit. Aenean dapibus condimentum ex nec fermentum. Aliquam accumsan velit in dui sagittis cursus. Vestibulum id scelerisque risus, at efficitur turpis. 
 
      <p> 
 
     </div> 
 
     <!-- end col --> 
 

 
     </div> 
 
     <!-- end row --> 
 

 
    </div> 
 
    <!-- end container --> 
 
    </div> 
 
    <!-- end container-fluid --> 
 

 
    <div class="container-fluid footer"> 
 
    <div class="container no-pad"> 
 
     <footer class="row"> 
 
     <div class="col-sm-12 text-center visible-xs" style="background-color:#45555f;"> 
 
      <div class="to-top"><a href="#"><span class="glyphicon glyphicon-chevron-up"></span>back to top</a> 
 
      </div> 
 
     </div> 
 
     <!-- end col --> 
 

 
     <div class="col-sm-12 text-center visible-xs"> 
 
      <div class="pad-bottom-md pad-top-sm"><a href="#">Products</a> | <a href="#">Services</a> | <a href="#">News</a> | <a href="#">Jobs</a> | <a href="#">Company</a> 
 
      </div> 
 
     </div> 
 
     <!-- end col --> 
 

 
     <div class="col-sm-4"> 
 
      <h6>Company Name</h6> 
 
      <address> 
 
      Address 1<br> 
 
      Address 2<br> 
 
      Address 3<br> 
 
      <span>555-555-5555</span> 
 
      </address> 
 
     </div> 
 
     <div class="col-sm-4"></div> 
 
     <div class="col-sm-4 pad-bottom-md"> 
 
      <h6>Connect</h6> 
 
      <div class="social"> <a href="" class="twitter"><span class="mu-icon-twitter"></span></a> <a href="" class="linkedin"><span class="mu-icon-linkedin2"></span></a> <a href="" class="youtube"><span class="mu-icon-youtube"></span></a> 
 
      </div> 
 
      <!-- end social --> 
 
     </div> 
 
     <div class="col-sm-12 pad-bottom-md"> 
 
      <div class="copy">&copy; 2016 Company Name, LLC. <span style="white-space:nowrap;"><a href="privacy.html">Privacy</a> | <a href="terms.html">Terms</a> | <a href="disclaimer.html">Disclaimer</a></span> 
 
      </div> 
 
     </div> 
 
     </footer> 
 
    </div> 
 
    <!-- end container --> 
 
    </div> 
 
    <!-- end container-fluid --> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script> 
 
    window.jQuery || document.write('<script src="js/vendor/jquery.min.js"><\/script>') 
 
    </script> 
 
    <script src="js/bootstrap.min.js"></script> 
 
    <script src="js/script-prototype-only.js"></script> 
 
</body> 
 

 
</html>

$(window).scroll(function() { 
     if ($(window).width() < mobileStart) {      
      $('.subnav').removeClass('navbar-fixed-top'); 
     } else {               
      if ($(window).scrollTop() > navFixStart) { 
       $('nav').addClass('navbar-fixed-top'); 
       if ($(window).scrollTop() > subFixStart) { 
        $('.subnav').addClass('navbar-fixed-top'); // bugger!!! 
       } else if ($(window).scrollTop() <= subFixStart) { 
        $('.subnav').removeClass('navbar-fixed-top'); 
       } 
      } else {           
       // some more stuff 
      } 
     } 
    });

來源

2016-06-06 janeh

您能顯示您的HTML嗎？ – makshh

添加了html ..... – janeh

問題是，當你的'subnav'固定的時候，'subnav'的高度在文檔中是0（因爲它是固定位置的），如果它不固定，實際高度是有關50像素。這會導致閃爍。 – makshh

<div class="container-fluid block">

你有當subnav固定加padding-top這個div等於你subnav元素的高度。

例如，如果您subnav具有50像素高度的代碼可能是這樣的：

$(window).scroll(function() { 
    if ($(window).width() < mobileStart) { 
     $('.subnav').removeClass('navbar-fixed-top'); 
    } else { 
     if ($(window).scrollTop() > navFixStart) { 
      $('nav').addClass('navbar-fixed-top'); 
      if ($(window).scrollTop() > subFixStart) { 
       $('.subnav').addClass('navbar-fixed-top'); 
       $('.container-fluid.block').css('padding-top', '50px'); 
      } else if ($(window).scrollTop() <= subFixStart) { 
       $('.subnav').removeClass('navbar-fixed-top'); 
       $('.container-fluid.block').css('padding-top', '0'); 
      } 
     } else { 
      // some more stuff 
     } 
    } 
});

如果用表格塊已經填充頂（例如20px），你必須添加50px給它（這樣在JavaScript更改50px到70px和0到20px）

來源

2016-06-06 20:26:01 makshh

我說得太快了。它沒有解決。我爲一個更簡單的頁面添加了HTML - 只有一個粘性導航而不是兩個。問題行是'$（'nav'）。addClass（'navbar-fixed-top'）;'。當屏幕高度恰好在頁腳上的電話號碼下方時，我無法向上滾動。當屏幕尺寸更小或更大時 - 完全沒有問題。 – janeh

此外，在給定的頁面上，可能有多個塊（容器） - 內容編輯器通過CMS輸入它們，所以我不能控制它們。每個塊都有.block {padding：40px 0;} – janeh

現在就開始吧。衛生署。 – janeh

導航欄固定頂部頁閃爍，我被迫頂部

回答

相關問題