StickyRail

Sticky Rail - makes its child element sticky within itself

Source:
Properties:
Name Type Description
selector string

DOM selector for a sticky rail
childSelector string

DOM selector for widget that is to be sticky in the rail
boundryCss string

CSS class for boundry element
upperboundCss string

CSS class for upperbound element
lowerboundCss string

CSS class for lowerbound element
$lowerboundMarkers object

Object keeping a list of lowerbound elements
$rails object

Object keeping a list of sticky rails on the page
minRailHeight number

minimal rail height for stickiness to take place
topMargin number

top position of element when sticky
adTopPadding number

ad top padding beneath ad to account for lowerbound placement
adBottomPadding number

ad bottom padding beneath ad to account for lowerbound placement
visibleRatio number

ratio to consider an element in view
watcher object

In view watcher for determining sticky state
Example
<div class="c-stickyRail {{modifier_class}}">
	<div class="c-stickyRail__widget">
	</div>
</div>

Methods

(inner) grow(HTMLElement)

Source:

Create a new sticky rail element, append after the last sticky rail in the sidebar

Parameters:
Name Type Description
HTMLElement $elem

a sticky rail element

(inner) handleUpperboundInView(evt)

Source:

Handle upperbound coming in / out of viewport

Parameters:
Name Type Description
evt object

InView event

(inner) handleUpperboundInView(evt)

Source:

Handle lower coming in / out of viewport

Parameters:
Name Type Description
evt object

InView event

(inner) init()

Source:

Search for any sticky rail elements and set up boundries for in view watching

(inner) setup(Array, startIndex)

Source:

Set up boundries for in view watching if native sticky css isn't supported When sticky rail ad is loaded, generate a new sticky rail element when data-sticky-rail-grow is set

Parameters:
Name Type Description
Array $elems

an array of sticky rail elements
startIndex

when $elems contains dynamically created sticky rail, index accounts for existing sticky rail

(inner) setupBoundry($elem, index, height)

Source:

Set up upper and lower bound for sticky rail in / out of view detection

Parameters:
Name Type Description
$elem HTMLElement

DOM element to set boundries for
index number

unique index for identifying the element
height number

height of sticky content, padding included for calculating lower bound

(inner) updateLowerbound(index, position)

Source:

Set lower bound position for specific element

Parameters:
Name Type Description
index number

unique index for identifying the element
position number

position of lower bound element