スティッキーヘッダーの高さを考慮してscrollTopをオフセットするにはどうすればよいですか？

Question

私はJS/JQueryを通して自分のやり方を混乱させることができ、私は以下のコードを変更する助けが必要です。ページを各要素の先頭にスクロールするのに使用されていますが、Webサイトのヘッダーは常に上に浮かぶので、要素の最上位のxピクセルがヘッダーの下になります。ヘッダー（静的な数値）の高さでオフセットされるように、これをどのように編集できますか？

$('html, body').animate({ scrollTop: element.offset().top }, {duration: 400 }); 

Answer 1

あなたのヘッダーは固定の高さである場合は、ちょうどあなたのページの先頭にパディングを追加するには（body）それは高さだと等価です。

CSS：

JS：それは一定の高さではない場合

body { padding-top: {height_of_header}px; } 

、その後、ちょうどあなたの要素マイナスあなたのヘッダーの高さの位置にあなたのscrollTopスプライトので、あなたのページのスクロールを変更します。

$('html, body').animate({ scrollTop: element.offset().top - $('#header').height() }, {duration: 400 });