スクロールは、私は、ウィンドウのスクロールに応じて、その高さを変更し、ヘッダーをしたヘッダの高さ

Question

に応じてオフセット。問題は、私は、ヘッダ項目のメニューをクリックしてセクションに身体をアニメーション化する必要があるということです。

$('a.smoothScroll').on('click', function(e) { 
    e.preventDefault(); 
    var $target = $($(this).attr('href')); 
    var $header = $('header'); 
    $('html, body').animate({ 
     scrollTop: $target.offset().top - $header.height() + 'px' 
    }, 300); 
}); 

ので、ページは私がメニュー項目をクリックすると、$headerは、高さの値を持っている、ロードされるとスクロールが251ピクセルに達すると、その値が変化し、アニメーション機能に通知する方法がわかりません。

私はこの時点で立ち往生していますが、ページを適切な値にスクロールさせるにはどうすればよいですか？

Answer 1

短縮したヘッダーの高さを戻すだけです。

$(window).scroll(function() { 
 
    var $header = $('.header'); 
 
    if ($(this).scrollTop() > 100) { 
 
    if (!$header.hasClass('sticky')) $header.addClass("sticky"); 
 
    } else { 
 
    if ($header.hasClass('sticky')) $header.removeClass("sticky"); 
 
    } 
 
}); 
 
$('.smoothScroll').on('click', function(e) { 
 
    e.preventDefault(); 
 
    var $target = $($(this).attr('data')); 
 
    var $header = $('.header'); 
 
    $('html, body').animate({ 
 
    scrollTop: $target.offset().top - $header.height() + 50 + 'px' 
 
    }, 300); 
 
});

.header { 
 
    height: 200px; 
 
    background-color: grey; 
 
} 
 

 
.sticky { 
 
    height: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class=header>HEADER!</div> 
 
<button class=smoothScroll data="#1">clickMe 
 
</button> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
<div id=1>Scroll to Me</div> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>