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

我有一个单页网站（Squarespace-Pacific模板），顶部有一个导航栏，可以滚动到主页，当你滚动到第一部分时，它会再次出现。所有链接都定位到相应的部分，该部分向上滑动，并与滚动条上显示的导航栏对齐

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

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

 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');
});
} 

if（$（窗口）.width（）<1438）
{
$（“#向下箭头”）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（“#锻造房页面”）.offset（）.top-120}，
“慢”）；
});
}
else if（$（window.width（）>1439&&$（window.width（）<1558）
{
$（“#向下箭头”）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（“#锻造房页面”）.offset（）.top-130}，
“慢”）；
});
} 

您可以通过良好的偏移量（菜单的高度）执行以下操作：

---

您可以使用良好的偏移量（菜单的高度）执行以下操作：

---

你想这么做吗？你想这么做吗？这会起作用，但如果我将菜单的高度添加到脚本中并调整浏览器的大小，高度会发生变化。我不知道这是否可能，但我需要避免…这会起作用，但如果我将菜单的高度添加到脚本并调整浏览器大小，高度会发生变化。我不知道这是否可能，但我需要避免。。。

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