минус отступ вверху в одностраничной навигации

Я новичок в Javascript/Jquery, поэтому я очень надеюсь, что вы любезны с моим кодом и моим вопросом.

Пожалуйста, посетите мой пример и нажмите на ссылку раздела. Вы можете видеть (может быть, используйте Инспектор), что верхняя секция имеет небольшой отступ. Я думаю, это зависит от изменения заголовка.

При втором нажатии позиция правильная - это значит - если стиль из шапки уже переключен - проблемы больше нет.

Пример на codepen.io

$(document).ready(function() {

// плавная прокрутка привязки

$(document).on('click', 'a', function(event){ event.preventDefault();

  $('html, body').animate({
      scrollTop: $( $.attr(this, 'href') ).offset().top
  }, 500);

});

// липкая навигация
var stickyNavTop = $('.sticky-navi').offset().top;

var stickyNav = function(){
var scrollTop = $(window).scrollTop();

if (scrollTop > stickyNavTop) { 
    $('.sticky-navi').addClass('sticky');
} else {
    $('.sticky-navi').removeClass('sticky');
}
};

stickyNav();

$(window).scroll(function() {
    stickyNav();
});

});

У кого-нибудь есть решение для меня… пожалуйста… :)?


navigation jquery singlepage
person fanni-portier    schedule 06.07.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это происходит из-за состояния гонки. Когда вы получаете смещение для прокрутки до навигации, оно еще не закреплено, но при прокрутке вниз условия меняются, когда навигация привязана к верхней части страницы, поэтому смещение, необходимое для прокрутки до ссылки, становится недействительным. Вам нужно это компенсировать.

var nav = $('.sticky-navi');
var oft = nav.hasClass('sticky') ? 0 : nav.height();
$('html, body').animate({
    scrollTop: $( $.attr(this, 'href') ).offset().top - oft
}, 500);

Что это делает, так это вычитает высоту навигации, когда она не липкая. Это потому, что мы знаем, что навигация будет привязана к верхней части страницы во время прокрутки. Когда он уже липкий, ничего делать не нужно.

person Rokas Kupstys    schedule 06.07.2016