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

Question

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

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

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

Example on codepen.io

$(document).ready(function() { 

// гладкий якорь прокрутки

$ (документ) .На ('нажмите', 'а', функция (событие) { 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(); 
}); 

});

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

Answer 1

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

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

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