如何将页面部分锚定到滚动显示的导航栏底部？

Question

我有一个单页网站（Squarespace - Pacific 模板）https://pacific-demo.squarespace.com/?nochrome=false，顶部有一个导航栏，该导航栏随主页一起滚动，并在您滚动到第一部分后再次出现。所有链接都锚定到对应部分，该部分向上滑动并与滚动显示的导航栏保持一致。

我想添加一个指向主页的链接，该链接带有一个箭头，该箭头仅将您向下发送到第一部分，并将其与出现的导航栏对齐。 通过一个简单的锚链接，该部分将滚动到导航栏后面的浏览器顶部。

我尝试了这个脚本（为我使用的每个媒体查询添加一个）并且它可以工作，但是如果我调整浏览器的大小，导航栏就会消失，所以我想使用不同的东西。

 if($(window).width() < 1438)
{
$("#arrow-down").click(function() {
    $('html,body').animate({
        scrollTop: $("#officina-page").offset().top -120},
        'slow');
});
}

    else if($(window).width() > 1439 && $(window).width() < 1558)
{
   $("#arrow-down").click(function() {
    $('html,body').animate({
        scrollTop: $("#officina-page").offset().top -130},
        'slow');
});
} 

Answer 1

您可以使用良好的偏移量（菜单的高度）来做这样的事情：

if($(window).width() > 1438) {
    $(function() {
      $('a[href*=#]').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
      });
    });
}