Plugins Sticky JavaScript Reference

Foundation provides JavaScript components for Sticky plugins as listed below.

Initializing

You can initialize sticky in JavaScript by using the foundation.sticky.js and foundation.core.js plugins. The plugin requires the following libraries −

  • foundation.util.triggers.js

  • foundation.util.mediaQuery.js

Foundation.Sticky

It specifies instance of sticky as defined below −

var elem = new Foundation.Sticky(element);

Sr.No. Name & Description Type
1

element

It creates a jQuery object into a sticky.

 jQuery
2

options

Default plugin setting is override.

 Object

Plugin Options

You can use the following plugins to customize the sticky instance. You can set the plugin option as individual data attributes.

Sr.No. Name & Description Example
1

container

For styling and sizing own classes can be included.

 ' '
2

stickTo

Sets the location where the element has to stick.

 'top'
3

anchor

Includes the id of that element, which is anchored to the single element.

 'exampleId'
4

topAnchor

Considers the top anchor id if, more elements are used as anchor points.

 'exampleId:top'
5

btmAnchor

Considers the bottom anchor id if more elements are used as anchor points.

 'exampleId:bottom'
6

marginTop

Sets the margin in em for the top element when it becomes sticky.

 1
7

marginBottom

Sets the margin in em for the bottom element when it becomes sticky.

 1
8

stickyOn

Breakpoint string should become sticky.

 'medium'
9

stickyClass

Applies class to the sticky element and removes on destruction.

 'sticky'
11

containerClass

Applies class to the sticky container. By default, it is sticky-container.

 'sticky-container'
12

checkEvery

Sticky points are recalculated by the number of scroll events between the plugins.

 50

Events

The sticky plugins attached to any element can trigger the following events.

Sr.No. Name & Description
1

stuckto.zf.sticky

It triggers an event when $element has become position: fixed; and Namespaced to top or bottom.
2

unstuckfrom.zf.sticky

It triggers an event when $element has become anchored and Namespaced to top or bottom.

Functions

The following are the functions used in sticky.

._pauseListeners

For scrolling the event, handler is removed and event is changed into anchor.

Sr.No. Name & Description Type
1

scrollListener

Window is attached with unique, namespaced scroll listener.

 string

._calc

On every scroll event, the calc is called and depending upon the cached and booleans value the _init fires the functions.

Sr.No. Name & Description Type
1

checkSizes

The plugin recalculates the size and breakpoints if it sets to true.

 Boolean
2

scroll

Scrolls the current position of the event which is passed from the cb function. Otherwise by default it sets to window.pageYOffset

 Number

.destroy

The current sticky element is destroyed; the element is reset to the top position. It removes the JS, which includes classes and css properties and $element is unwrapped when JS includes $container.

.emCalc

Helper function is used to calculate the em values.

Sr.No. Name & Description Type
1

Number

Number of ems are calculated in the pixels.

 em
foundation_plugins.htm
Advertisements