new GlueStack(options)
Sticks a stack of headers inside the viewport instead of scrolling out of view.
Arguments:
-
options
(Object)
 Supplied configuration
Properties
-
mainContainer
(HTMLElement)
 Container which contains the headers as direct children
-
hierarchySelectors
(Array.<String>|Array.<HTMLElement>)
 Array of selectors for getting headers hierarchy Required
-
zIndex
(Number)
 zIndex of the lowest header element. Optional
-
seniorSticky
(GlueStick)
 Collapsible sticky element which appears while scrolling up. Optional
-
[stopStickingMaxWidth=600]
(Number)
 Maximum responsive pixel width where the sticky stops sticking
-
glueStickOpts
(Object)
 additional params to pass to glueStick instances Optional
-
[callbacks]
(Object)
 User supplied functions to execute at given stages of the component lifecycle
Properties
-
preCreate
(function)
-
postCreate
(function)
-
preDestroy
(function)
-
postDestroy
(function)
-
-
Methods
computeHeight()
private
static
Calculates the height of the node excluding collapsing margins
calculateHierarchyOffsets() private
Calculate the offset of the header in case the next header in the same level is colliding
calculateTops() private
Calculate which elements should be sticky and calculates the top position of each level
cleanHierarchy() private
Cleans hierarchy before calculation
destroy()
Destroy stack behavior
onScroll() private
Handles scrollDown