Wie kann ich scrollTop ausgleichen, um die Höhe eines sticky headers zu berücksichtigen?

Question

Ich kann mich einfach durch JS/JQuery schlängeln und ich brauche etwas Hilfe, diesen Codeabschnitt unten zu ändern. Es wird verwendet, um die Seite zurück zum Anfang des jeweiligen Elements zu blättern, jedoch ist die Kopfzeile für die Website immer oben, sodass die oberste x Anzahl der Pixel des Elements unter der Kopfzeile endet. Wie kann ich das bearbeiten, so dass es um die Höhe der Kopfzeile (statische Nummer) versetzt ist?

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

Answer 1

Wenn Ihr Kopf eine feste Höhe ist, fügen Sie einfach Polsterung an den oberen Rand der Seite (body), die äquivalent ist es Höhe ist.

CSS:

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

Wenn es nicht eine Höhe fixiert, dann nur Ihre scrollTop ändern, um Ihre Seite blättert in die Position Ihres Elements minus die Höhe des Kopf:

JS:

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