Question

以下是相关网站：Navigation bar broken on mobile

当用户使用bootstrap的navbar-fixed-top类滚动通过jumbotron时，我将导航栏捕捉到屏幕顶部，这在大屏幕上完美运行，但是，在移动大小的屏幕上铬合金＆＃39;调试环境，当你滚过jumbotron时，导航栏会出现故障！

要查看操作中的问题，请转到链接的网站，右键单击chrome并检查，将窗口大小调整为移动大小。如果你慢慢滚过导航栏，它会中断！

添加navbar-fixed-top类的脚本如下所示。添加的填充修复了导航栏未正确捕捉的先前问题。

提前感谢您的帮助！：）

<!-- JQuery function for navbar-fixed-top and fix navigation top of page jump -->
<script> 
$(document).ready(function() {
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function(){ 
    $('.navbar-toggle:visible').click();
});

$(window).scroll(function () {
  //if you hard code, then use console
  //.log to determine when you want the 

      var d = $('#jumbo');
    if ($(window).scrollTop() > d.prop("scrollHeight") ) {
      $('#nav_bar').addClass('navbar-fixed-top');
      $('#linkList').addClass('fixed-links');
      $('body').css('margin-top','50px');
    }
    if ($(window).scrollTop() < d.prop("scrollHeight")) {
      $('#nav_bar').removeClass('navbar-fixed-top');
      $('#linkList').removeClass('fixed-links');
      $('body').css('margin-top','0px');
    }
});
});
</script>

移动导航栏错误地固定到屏幕顶部

0 个答案: