Foundation CSS Sticky Advanced

Foundation CSS is a free and open-source front-end framework for developing flexible web designs. It's one of the most powerful CSS frameworks, and it delivers a responsive grid, as well as HTML and CSS UI components, templates, and more, across all platforms. It also has several JavaScript extension features that are optional. It also renders quickly on mobile devices thanks to the inclusion of the Fastclick.js utility.

The sticky component is used to create anything that stays at the top of the page when the user scrolls down it. Sidebars, external links, and topbars can all be created with these components. To make a sticky element, use the sticky class and the data-sticky property with an element. The data-sticky-container parameter governs the sizing and the grid layout of sticky items.

With the already stated attributes and class, we can make an element sticky but it will stay sticky throughout the document. But if we want to specify a certain space through which the element will stay sticky and scrollable, we can use two anchors to specify from where the element will start being sticky and where it will stop being sticky. 

To specify the anchors we can use two attributes data-top-anchor="idOfSomething:[top/bottom]", data-btm-anchor="idOfSomething:top/bottom]" or we can even set a pixel number instead of an id data-top-anchor="pixelNumber".

Foundation CSS Sticky Advanced classes:

• sticky: This class makes it possible for items to remain in the defined place.

Foundation CSS Sticky Advanced Attributes:

• data-sticky: The sticky class is followed by this property, which provides the element with numerous functions.
• data-sticky-container: This attribute is for sticky items that must be enclosed in a container that determines their size and grid layout.
• data-top-anchor: This specifies from where an element will start being sticky. This attribute takes the id of an element as its value. 
• data-btm-anchor: This specifies from where an element will stop being sticky. This attribute takes the id of an element as its value. 

Example 1: The below example demonstrates how we can specify the position where the image will start being sticky and stop being sticky.

Output:

👁 Image

Example 2: The below example demonstrates how we can specify the position where the navigation bar will start being sticky and stop being sticky.

Output:

👁 Image

Reference: https://get.foundation/sites/docs/sticky.html#advanced