Namespace: PositionSticky

PositionSticky

Author:
  • Ahmet Katrancı <ahmet@katranci.co.uk>
Source:

Members

<static, constant> POS_SCHEME_ABSOLUTE

Source:

<static, constant> POS_SCHEME_FIXED

Source:

<static, constant> POS_SCHEME_STATIC

Source:

Methods

<static> create(element, options) → {PositionSticky}

Creates an instance of PositionSticky
Parameters:
Name Type Description
element
options
Source:
Returns:
Type
PositionSticky

<private> _calcThreshold()

Calculates the point where the sticky behaviour should start
Source:

<private> _canStickyFitInContainer() → {boolean}

Checks whether the element can fit inside the visible portion of the container or not
Source:
Returns:
Type
boolean

<private> _createPlaceholder()

Creates the placeholder that will be used in place of the element when the element is positioned absolutely or fixed
Source:

<private> _getAvailableSpaceInContainer() → {number}

Calculates the height of the visible portion of the container that can be used to fit the sticky element
Source:
Returns:
Type
number

<private> _getStickyDistanceFromDocumentTop() → {number}

Calculates sticky element's total offset from the document top. It uses placeholder if it is called when the sticky element is not static (e.g. through #refresh)
Source:
Returns:
Type
number

<private> _init(element, options) → {PositionSticky}

Constructor method
Parameters:
Name Type Description
element HTMLElement
options Object
Source:
Returns:
Type
PositionSticky

<private> _isAbsolute() → {boolean}

Source:
Returns:
Type
boolean

<private> _isBelowThreshold() → {boolean}

Returns true when the page hasn't been scrolled to the threshold point yet. Otherwise, returns false.
Source:
Returns:
Type
boolean

<private> _isFixed() → {boolean}

Source:
Returns:
Type
boolean

<private> _isStatic() → {boolean}

Source:
Returns:
Type
boolean

<private> _makeAbsolute()

Source:

<private> _makeFixed()

Source:

<private> _makeStatic()

Source:

<private> _onScroll()

Debounces the scroll event
Source:
See:
To Do:
  • Don't run _update when container is not visible

<private> _setLeftPositionWhenAbsolute()

Gets the element's distance from its offset parent's left and subtracts any horizontal margins and saves it
Source:

<private> _setLeftPositionWhenFixed()

Gets the element's distance from document left and saves it
Source:
To Do:
  • Write a test that is covering when the page is scrolled

<private> _setOffsetBottom()

Sets the amount to subtract in #_canStickyFitInContainer and also sets the distance that the sticky element will have from the bottom of its container when it is positioned absolutely
Source:

<private> _setOffsetTop()

Sets the distance that the sticky element will have from the top of viewport when it becomes sticky
Source:

<private> _subscribeToWindowScroll()

Attaches #_onScroll method to Window.onscroll event
Source:

<private> _update()

This is the main method that runs on every animation frame during scroll. It starts with checking whether the element is within the static range. If not, it checks whether the element is within the fixed range. Otherwise, it positions the element absolutely.
Source:

refresh()

Re-measures the cached positions/dimensions that are used during scroll
Source: