Open In App

Foundation CSS Stick to bottom

Improve
Improve
Like Article
Like
Save
Share
Report

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:

HTML




<!DOCTYPE html>
<html>
  
<head>
  <title>Foundation CSS Stick to bottom</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet"
          href=
  
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body style="padding:2rem 1rem;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>Foundation CSS Sticky</h3>
    <div class="row">
        <div class="columns small-6" 
             id="example1" 
             data-something>
            <p id="doodle">
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG. This is an
                example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line.
            </p>
  
            <p>
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG. This is an
                example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line.
            </p>
  
            <p>
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG. This is an
                example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line.
            </p>
  
            <p>
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG. This is an
                example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line.
            </p>
  
            <p>
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG. This is an
                example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line.
            </p>
  
        </div>
        <div class="columns small-6 right" 
             data-sticky-container>
            <div class="sticky"
                 data-sticky data-anchor="example1" 
                 data-stick-to="bottom">
                <img class="thumbnail"
                     src=
            </div>
        </div>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>


Output:

Foundation CSS Stick to bottom

Foundation CSS Stick to bottom

Example 2:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title> Foundation CSS Stick to bottom</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet" 
          href=
  
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Foundation CSS Sticky</h3>
    <div class="row">
        <div class="columns demo-column small-6">
            <p>
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG.This
                is an example line.
            </p>
  
            <p>
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG.This
                is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.This 
                is an example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.This 
                is an example line.
            </p>
  
            <p>
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG.This
                is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.This 
                is an example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.This 
                is an example line.
            </p>
  
            <p id="example2">
                <strong>
                  The image to the right will be sticky when
                  it hits the top of this paragraph element.
                </strong>
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG.This
                is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.This 
                is an example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.This 
                is an example line.
            </p>
  
            <p>
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG.This
                is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.This 
                is an example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.This 
                is an example line.
            </p>
  
            <p>
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG.This
                is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.This 
                is an example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.This 
                is an example line.
            </p>
  
            <p>
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG.This
                is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.This 
                is an example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.This 
                is an example line.
            </p>
  
            <p id="foo">
                <strong>
                  The image to the right will lose stickiness
                  when it hits the bottom of this paragraph element.
                </strong>
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG.This
                is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.This 
                is an example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.This 
                is an example line.
            </p>
  
        </div>
        <div class="columns small-6 right"
             data-sticky-container>
            <div class="sticky" 
                 data-sticky
                 data-stick-to="bottom"
                 data-top-anchor="example2:top"
                 data-btm-anchor="foo:bottom">
                <img class="thumbnail" 
                     src=
            </div>
        </div>
    </div>
  
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>


Output:

Foundation CSS Stick to bottom

Foundation CSS Stick to bottom

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



Last Updated : 17 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads