Question

我是Javascript / Jquery的初学者，所以我真的希望你对我的代码和我的问题感到慷慨。

请访问我的示例并点击部分链接。您可以看到（可能使用Inspector），顶部的部分有点缩进。我想这取决于更改标题。

当您再次单击时，位置是正确的 - 这意味着 - 如果标题中的样式已经切换 - 则不再存在问题。

$(document).ready(function() {

//平滑的锚点滚动

$（文件）.on（＆＃39;点击＆＃39;，＆＃39; a＆＃39;，功能（事件）{ event.preventDefault（）;

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

}）;

//粘性导航
var stickyNavTop = $（＆＃39; .sticky-navi＆＃39;）。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);

这样做是在没有粘性时减去导航的高度。这是因为我们知道导航将在滚动期间粘贴到页面顶部。当它已经粘稠时，我们不需要做任何事情。

在单页面导航中减去缩进

1 个答案: