如何將頁面部分錨定在滾動顯示的導航欄底部？

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