Как я могу компенсировать scrollTop, чтобы учесть высоту липкого заголовка?

Question

Я могу просто запутать свой путь через JS/JQuery, и мне нужна помощь в изменении этого фрагмента кода ниже. Он используется для прокрутки страницы до вершины соответствующего элемента, однако заголовок для веб-сайта всегда плавает сверху, так что верхнее число пикселей пикселя элемента находится под заголовком. Как я могу отредактировать это, чтобы он был смещен на высоту заголовка (статическое число)?

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

Answer 1

Если заголовок фиксированной высоты, просто добавить отступ в верхней части страницы (body), что эквивалентно его высота.

CSS:

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

Если это не фиксированная высота, то просто измените scrollTop так, чтобы ваши страницы прокручивается к положению вашего элемента минус высота вашего заголовка:

JS:

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