scrollbackHeader
scrollbackHeader creates a non-stupid-behaving semi-sticky top header, that sticks to the top when needed, and scrolls away when not needed. Simple!
Created long ago, around 2014, in the early days of headers triggered by scroll events, when headers animated themselves in on the slightest scroll upwards, and placed themselves above the text you were trying to read. Strangely, they still do, all over the internets. Please people, use this method instead!
Returns an object with a destroy
method to call at cleanup.
Demo:
https://codepen.io/smlsvnssn/full/QWKZqYm
Params:
-
element (required), an instance of
Element
that the effect will apply to. -
sideeffect, an optional
Function
that applies any desired sideeffect. Function is called with parameterselement
andrenderstate
. Renderstate can be either"absolute"
(element follows page scroll),"scrollback"
(element scrolls back into view) or"fixed"
(element sticks to top). Example here: https://codepen.io/smlsvnssn/pen/JjWNLMB and https://codepen.io/smlsvnssn/pen/RwGqWMZ - thresholdUp, a threshold value for activating the scrollback effect, scrolling the element back in or out of view. Defaults to 5 px/animationframe.
-
thresholdDown, defaults to the same value as
thresholdUp
.
Usage:
Vanilla:
import withScrollback from 'scrollbackheader'
sb = withScrollback(document.querySelector('header'));
As a svelte action:
<script>
import withScrollback from 'scrollbackheader'
</script>
<div class="header" use:withScrollback>Hello scrollbackheader!</div>