https://www.dcbib.dk/themes/custom/novel/assets/dpl-design-system/js/header-sticky.js?tm868m

1window.addEventListener("DOMContentLoaded", () => {
2  let scrollDirection = "up";
3  let lastScrollY = window.scrollY;
4  const headerOffsetTop = document.querySelector("header").offsetTop;
5
6  const updateStickyHeader = ({
7    // If you want to set a custom starting position for the header.
8    initialHeaderYposition = null,
9    // Tweak the header position when it's down by this amount.
10    headerDownTopPositionOffset = 5,
11    // Wait this many pixels before showing/hiding the header.
12    waitPx = 5,
13  }) => {
14    // Get the starting position of the header
15    const headerYStartPosition = initialHeaderYposition ?? headerOffsetTop;
16
17    const { scrollY } = window;
18    // Detect if we are going up or down.
19    const direction = scrollY > lastScrollY ? "down" : "up";
20    if (
21      direction !== scrollDirection &&
22      Math.abs(scrollY - lastScrollY) > waitPx
23    ) {
24      scrollDirection = direction;
25    }
26    lastScrollY = scrollY > 0 ? scrollY : 0;
27
28    // Control header direction class.
29    const headerContainerSelector = ".header";
30
31    if (scrollDirection === "down") {
32      const headerHeight = document.querySelector(
33        headerContainerSelector,
34      ).offsetHeight;
35      const headerDownTopPosition = headerHeight + headerDownTopPositionOffset;
36      document.querySelector(headerContainerSelector).style.top =
37        `-${headerDownTopPosition}px`;
38    } else {
39      document.querySelector(headerContainerSelector).style.top =
40        `${headerYStartPosition}px`;
41    }
42  };
43
44  window.addEventListener("scroll", updateStickyHeader);
45});