javascript - Bootstrap 模板 jquery 动画错误

Question

我将此模板用于我的网站 http://www.bootply.com/100702 但是，当您单击菜单选项时，动画菜单会出现错误和滞后。

点击链接后，页面闪烁错误位置，然后显示动画。

我怀疑问题出在这段代码中:

/* smooth scrolling for nav sections */
$('#nav .navbar-nav li>a').click(function(){
  var link = $(this).attr('href');
  var posi = $(link).offset().top+20;
  $('body,html').animate({scrollTop:posi},700);
})

此代码需要使用点击之间的延迟或其他改进动画的方法吗？

Answer 1

错误来自滚动时激活的 ScrollSpy。 添加类 spy-activated

<div class="navbar navbar-custom navbar-inverse navbar-static-top spy-activated" id="nav">

针对类(class)

$('body').scrollspy({ target: '.spy-activated' })

滚动时切换 spy 激活。请记住在 li 元素上手动调整“active”类

/* smooth scrolling for nav sections */
$('#nav .navbar-nav li>a').click(function(){
  $("#nav").removeClass("spy-activated");
  $(this).parent().siblings().each( function(){ $(this).removeClass("active"); });
  $(this).parent().addClass("active");
  var link = $(this).attr('href');
  var posi = $(link).offset().top+20;
  $('body,html').animate({scrollTop:posi},700, function(){
     $("#nav").addClass("spy-activated");
  });
})

bootply:http://www.bootply.com/YmaEAbUWEf