Foundation CSS Stick to bottom

Foundation CSS is an open-source & responsive front-end framework built by the ZURB foundation in September 2011, which makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. The framework is built on SaaS-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on SaaS-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

Sticky component allows you to make something that stays stuck to the top of the page as the user scrolls down the page. Sticky components find their use in sidebars, external links, or topbars. Add the .sticky class and [data-sticky] to an element to create a sticky element. Sticky elements must be wrapped in a container with [data-sticky-container], which determines the sizing and grid layout.

Stick to bottom: It is one of the sticky class variants. Here, the sticky elements stick to the bottom as the user scrolls. To stick elements to the bottom add the .sticky class, [data-sticky] and additionally [data-stick-to="bottom"]. If needed, you can use two anchor points i.e the start and endpoints of the sticky using data-top-anchor="elementID", data-btm-anchor="elementID" for the top and bottom anchor points respectively.

Foundation CSS Stick to bottom Attribute:

• data-stick-to="bottom": This attribute is used to make the sticky stick to the bottom.

Syntax:

<div class="container-name" data-sticky-container>
 <div class="sticky" 
 data-sticky data-stick-to="bottom"
 data-top-anchor="Start_point" 
 data-btm-anchor="End_Point">
 <img class="thumbnail" src="image_source">
 </div>
</div>

Example 1:

Output:

👁 Foundation CSS Stick to bottom

Example 2:

Output:

👁 Foundation CSS Stick to bottom

Reference: https://get.foundation/sites/docs/sticky.html#stick-to-bottom