Reference Implementations

Sticky elements

Sticky elements like navigation bars etc.

Stickiness must always be implemented with CSS. Sticky elements MUST NOT be repositioned by changing its coordinates in javascript.

Always sticky

If an element is displayed on the position with no exception (e.g. sticky sidebar) the element must use CSS position:fixed; or position:sticky;.

Based on scroll position or event

If the element is floating until the user reaches a certain scroll position or another event occurs, CSS attributes or classes must be used to make elements "sticky".

Example:

The following code is just showing the general idea and you don't have to use it directly.

CSS:

#navbar {
    /* more css */
}

#navbar.sticky {
    position: fixed;
    top: 0;
    left: 0;

    /* more css */
}

HTML:

<div id="navbar">
    <!-- navbar content -->
</div>

JavaScript:

document.addEventListener('scroll', function(e){
  if (window.pageYOffset > 100) {
    document.getElementById("navbar").classList.add("sticky");
  } else {
    document.getElementById("navbar").classList.remove("sticky");
  }
});