Блог

Я использовал этот шаблон для своего веб-сайта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);
})
  

Этот код требуется для использования задержки между щелчками или другого метода улучшения анимации?

Ошибка возникает из-за активации ScrollSpy при прокрутке. Добавить класс spy-activated

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

Нацелиться на класс

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

Переключение spy-активируется при прокрутке. Не забудьте вручную настроить «активный» класс для li элементов

 /* 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");
  });
})
  

загрузочный процесс:http://www.bootply.com/YmaEAbUWEf

Я обнаружил ошибку в этом коде.

Вам нужно использовать

   e.preventDefault();
  

Чтобы отключить использование раздела по умолчанию.
Правильный код:

 $('#nav .navbar-nav li>a').click(function(e){
  var link = $(this).attr('href');
  var posi = $(link).offset().top;
  e.preventDefault();
  $('body,html').animate({scrollTop:posi},700);
});