モバイル上のページアンカーのスクロールと、大きなビューとは異なる要素の高さについて

Question

次のコードは、768px（含まれている）より大きいビューポートのページアンカーにすばらしいスクロール効果をもたらします。それは、アンカーのターゲットを、#navbarTopの下にうまく配置します。しかし、小さなビューポートでは、それは異なる要素、#menuMobileであり、その高さは尊重すべきです。 #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; 
    }); 
    }); 
});