GlueStack

GlueStack

new GlueStack(options)

Sticks a stack of headers inside the viewport instead of scrolling out of view.

Arguments:
  1. options (Object)  

    Supplied configuration

    Properties
    1. mainContainer (HTMLElement)  

      Container which contains the headers as direct children

    2. hierarchySelectors (Array.<String>|Array.<HTMLElement>)  

      Array of selectors for getting headers hierarchy Required

    3. zIndex (Number)  

      zIndex of the lowest header element. Optional

    4. seniorSticky (GlueStick)  

      Collapsible sticky element which appears while scrolling up. Optional

    5. [stopStickingMaxWidth=600] (Number)  

      Maximum responsive pixel width where the sticky stops sticking

    6. glueStickOpts (Object)  

      additional params to pass to glueStick instances Optional

    7. [callbacks] (Object)  

      User supplied functions to execute at given stages of the component lifecycle

      Properties
      1. preCreate (function)
      2. postCreate (function)
      3. preDestroy (function)
      4. 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