在平板電腦/手機模式下，我的粘性/固定到頂部的導航欄停止粘滯

Question

我製作了一個粘性/固定到頂部的導航欄和引導程序。它的反應靈敏，當屏幕低於設定的尺寸時，導航選項變成漢堡菜單。我還從教程中添加了JavaScript，以便它可以很好地滾動。

它除了在平板電腦/電話模式時，導航欄停止被固定到頂部，併成爲靜態，而不是工作的罰款。見here的差異/它應該是什麼樣的。我不確定我做錯了什麼。

我已經嘗試了很多版本/教程，有時候我會在兩種情況下都會變得粘滯，但是沒有漢堡包菜單的擴展等等。這是迄今爲止我所知道的最好的。下面是HTML：

<div class="header"> 
<div class="container"> 
    <nav class="navbar-default" role="navigation"> 
     <div class="navbar-header"> 
     <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a href="#" class="navbar-brand scroll-top">Company</a> 
     </div> 
     <!--/.navbar-header--> 
    <div id="main-nav" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#" class="scroll-link" data-id="contact">Contact</a></li> 
      <li><a href="#" class="scroll-link" data-id="about">About</a></li> 
      <li><a href="#" class="scroll-link" data-id="testimonials">Testimonials</a></li> 
     </ul> 
    </div> 
    <!--/#main-nav.navbar-collapse--> 
</nav> 
    <!--/.navbar--> 
</div> 
<!--/.container--> 

和JavaScript：

<script type="text/javascript"> 
$(document).ready(function() { 
// navigation click actions 
$('.scroll-link').on('click', function(event){ 
    event.preventDefault(); 
    var sectionID = $(this).attr("data-id"); 
    scrollToID('#' + sectionID, 750); 
}); 
// scroll to top action 
$('.scroll-top').on('click', function(event) { 
    event.preventDefault(); 
    $('html, body').animate({scrollTop:0}, 'slow');   
}); 
// mobile nav toggle 
$('#nav-toggle').on('click', function (event) { 
    event.preventDefault(); 
    $('#main-nav').toggleClass("open"); 
}); 
}); 
// scroll function 
function scrollToID(id, speed){ 
var offSet = 50; 
var targetOffset = $(id).offset().top - offSet; 
var mainNav = $('#main-nav'); 
$('html,body').animate({scrollTop:targetOffset}, speed); 
if (mainNav.hasClass("open")) { 
    mainNav.css("height", "1px").removeClass("in").addClass("collapse"); 
    mainNav.removeClass("open"); 
} 
    } 
if (typeof console === "undefined") { 
console = { 
    log: function() { } 
}; 
} 

很抱歉，如果我不好解釋什麼。大約一個月前我嘗試了導航欄，然後放棄了，所以希望我沒有忘記任何東西。

Answer 1

包括「導航欄固定頂」類的導航標籤即

<nav class="navbar-default navbar-fixed-top" role="navigation"> 

它將很好地工作。