使用粘滞菜单平滑滚动

Question

现在这是我的问题，这是一个带有粘性菜单 (#main-menu) 的单页网站。 #main-menu 固定在该位置。第一张图片显示了当我点击菜单上的“关于”链接时页面的外观，页面将在#about 上平滑滚动。

但是在图片二上，我的网站正在呈现什么，当我点击“关于”链接时，关于我们的标题会滚动到顶部并隐藏在#main-menu 上。

这是我的 JS 代码：

$('a').click(function(e) {
        var target = $(this).attr('href');
        e.preventDefault();

        $('html,body').animate({
            scrollTop: $(target).offset().top
        }, 800, 'easeInOutCirc');
    });

我如何使它停止直到#main-menu 底部？提前一百万谢谢！

Answer 1

您想从 offsetTop 中减去标题的高度。

$('html').animate({ // $(document.documentElement) works too
  scrollTop: Math.max($(target).offset().top - $('#your-header').outerHeight(), 0)
}, 800, 'easeInOutCirc');

添加 Math.max( ... , 0) 以避免在链接目标位于最顶部时滚动到负偏移量。