滾動頁面錨點在移動和關於不同元素的高度比大視圖

Question

我有下面的代碼，產生良好的滾動效果頁面定位在大於768px（包括）的視口上。它將錨點的目標恰好放置在#navbarTop的高度以下。但是，在小視口中，它是一個不同的元素，其高度應該受到尊重。 #menu Mobile是點擊humburger菜單按鈕時展開的鏈接列表。

$(document).ready(function() { 

var headerHeight, part, place; 

function getOffsets() { 
    headerHeight = $('#navbarTop').height(); 
} 

$(window).load(getOffsets).resize(getOffsets); 

$(function() { 
    $('.headerAnchor').click(function() { 
     part = $(this).attr('href'); 
     place = $(part).offset().top - headerHeight; 

     $('html, body').animate({ 
      scrollTop: place 
     }, 'slow'); 

     return false; 
    }); 
}); 
}); 

和HTML主菜單：

<div class="navbar navbar-default navbar-fixed-top" id="navbarTop"> 
    <div class="navbar-header"> 
     <a href="#" class="navbar-brand" id="brand">Curriculum Vitae</a> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
    </div> 
    <ul id="menuMobile" class="nav navbar-nav navbar-right collapse navbar-collapse"> 
     <li><a class="headerAnchor" href="#data">Dane <span>kontaktowe</span></a></li> 
     <li><a class="headerAnchor" href="#aspirations">Aspiracje <span>zawodowe</span></a></li> 
     <li><a class="headerAnchor" href="#qualifications">Kwalifikacje</a></li> 
     <li><a class="headerAnchor" href="#portfolio">Portfolio</a></li> 
     <li><a class="headerAnchor" href="#experience">Historia <span>zatrudnienia<span></a></li> 
     <li><a class="headerAnchor" href="#education">Wykształcenie</a></li> 
     <li><a class="headerAnchor" href="#skills">Umiejętności</a></li> 
    </ul> 
</div> 

我試圖調整JS代碼，能夠對移動視圖良好的滾動效果 - 在相對的#menuMobile的高度保持開放菜單按鈕被點擊後的時間。然而，我不能得到適當的效果：

$(document).ready(function() { 

var headerHeight, part, place; 

function getOffsets() { 
    headerHeight = $('#navbarTop').height(); 
    menuMobileHeight = $('#menuMobile').height(); 
} 

$(window).load(getOffsets).resize(getOffsets); 

$(function() { 
    $('.headerAnchor').click(function() { 
     part = $(this).attr('href'); 
     place = $(part).offset().top - headerHeight; 
     placeMobile = $(part).offset().top - menuMobileHeight; 

     $('html, body').animate({ 
      scrollTop: place 
     }, 'slow'); 

     if ($(window).width() < 768) { 
      $('html, body').animate({ 
       scrollTop: placeMobile 
      }, 'slow'); 
     } 

     return false; 
    }); 
}); 
}); 

任何人都可以告訴我做錯了什麼？

Answer 1

我設法找到了以這種方式編寫代碼獲取滾動在不同尺寸的合適尺寸的解決方案：

$(document).ready(function() { 

    var headerHeight, part, place; 

    function getOffsets() { 
    headerHeight = $('#navbarTop').height(); 
    menuMobileHeight = $('#menuMobile').height() + 50; 
    } 

    $(window).load(getOffsets).resize(getOffsets); 

    $(function() { 
    $('.headerAnchor').click(function() { 
     part = $(this).attr('href'); 
     place = $(part).offset().top - headerHeight; 
     placeMobile = $(part).offset().top - menuMobileHeight; 

     if ($(window).width() >= 768) { 
     $('html, body').animate({ 
      scrollTop: place 
     }, 'slow'); 
     } 

     if ($(window).width() < 768) { 
      $('html, body').animate({ 
       scrollTop: placeMobile 
      }, 'slow'); 
     } 

     return false; 
    }); 
    }); 
});