减去单页导航顶部的缩进

Question

我是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();
});

}）;

有人为我提供解决方案吗...请... :)？

Answer 1

这是由于竞争条件而发生的。当您获得偏移以滚动到导航时还不粘滞，但是当向下滚动时，当导航粘在页面顶部时，条件会发生变化，因此滚动到链接所需的偏移量变得无效。你需要弥补这一点。

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

这样做是在导航不粘时减去导航的高度。这是因为我们知道导航在滚动过程中会粘在页面顶部。当它已经很粘时，我们不需要做任何事情。