Scroll offset respecting sticky elements (here: gin toolbar)

For fixed headers

base.css

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(70px + var(--gin-toolbar-secondary-height, 0px)) !important;
}
@media (min-width: 767px) {
  html {
    scroll-padding-top: calc(135px + var(--gin-toolbar-secondary-height, 0px)) !important;
  }
}

Issue:

If you set an anchor link and let the browser scroll there, by default it scrolls to position 0 on the y angle, placing the content to which was scrolled exactly at the top of the browser's viewport. But if the website uses a sticky header which is also placed on top of the viewport, this actual content to which was scrolled might not be visible, since the sticky header overlaps it.

Solution:

Use the CSS property proposed in the snipped. It sets an offset when the browser triggers the scrolling action and allows to take the height of sticky headers or sticky toolbars into account.

Zurück zur DevBit-Übersicht