Open In App

Foundation CSS Sticky Advanced

Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
    
    <!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->
    <link rel="stylesheet" href=
    
    <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
    <link rel="stylesheet" href=
  
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div style="margin:2rem;">
        <h1 style="color:green;">
          GeeksforGeeks
          </h1>
        <h4>
              Foundation CSS Sticky Advanced
         </h4>
    </div>
    <div class="row">
        <div class="columns demo-column small-6">
            <p class="margin-3">
                The Image at the right side will
                  slide now but it will become
                sticky by the time you scroll 
                  past the next paragraph.
            </p>
  
            <p class="margin-3" 
               id="first">
                Hi Geeks!! Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.
                This is an example line. 
                Hi Geeks!! Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG. 
                This is an example line. 
                Hi Geeks!! Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG. 
                This is an example line. 
                Hi Geeks!! Welcome to GeeksForGeeks. 
                This is an example line. 
            </p>
  
            <p class="margin-3">
                Hi Geeks!! Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.
                This is an example line. 
                Hi Geeks!! Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG. 
                This is an example line. 
                Hi Geeks!! Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG. 
                This is an example line. 
                Hi Geeks!! Welcome to GeeksForGeeks. 
                This is an example line. 
            </p>
  
            <p class="margin-3">
                Hi Geeks!! Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.
                This is an example line. 
                Hi Geeks!! Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG. 
                This is an example line. 
                Hi Geeks!! Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG. 
                This is an example line. 
                Hi Geeks!! Welcome to GeeksForGeeks. 
                This is an example line. 
            </p>
  
            <strong class="margin-3" 
                    id="last">
                The image stops being sticky from this paragraph.
            </strong>
            <p class="margin-3">
                Hi Geeks!! Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.
                This is an example line. 
                Hi Geeks!! Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG. 
                This is an example line. 
                Hi Geeks!! Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG. 
                This is an example line. 
                Hi Geeks!! Welcome to GeeksForGeeks. 
                This is an example line.
            </p>
  
            <p class="margin-3">
                Hi Geeks!! Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.
                This is an example line. 
                Hi Geeks!! Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG. 
                This is an example line. 
                Hi Geeks!! Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG. 
                This is an example line. 
                Hi Geeks!! Welcome to GeeksForGeeks. 
                This is an example line.
            </p>
  
            <p class="margin-3">
                Hi Geeks!! Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.
                This is an example line. 
                Hi Geeks!! Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG. 
                This is an example line. 
                Hi Geeks!! Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG. 
                This is an example line. 
                Hi Geeks!! Welcome to GeeksForGeeks. 
                This is an example line.
            </p>
  
        </div>
        <div class="columns small-6 right" data-sticky-container>
            <div class="sticky" 
                 data-sticky data-top-anchor="first:top" 
                 data-btm-anchor="last:bottom">
              <img class="thumbnail" src=
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $(document).foundation();
        })
    </script>
</body>
</html>


Output:

 

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

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
    
    <!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->
    <link rel="stylesheet" href=
  
    <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
    <link rel="stylesheet" href=
  
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div data-sticky-container>
        <div class="title-bar" 
             data-sticky data-options="marginTop:0;" 
             style="width:100%" 
             data-top-anchor="first:top" 
             data-btm-anchor="last:bottom">
            <div class="title-bar-left" 
                 style="font-size:1.5rem;">
                <strong>
                  GeeksforGeeks
                  </strong>
            </div>
            <div class="top-bar-right">
                <ul class="menu">
                    <li>
                      <input type="search" 
                               placeholder="Search">
                      </li>
                    <li>
                      <button type="button" 
                                class="button">
                          Search</button>
                      </li>
                </ul>
            </div>
        </div>
    </div>
    <div style="margin:2rem;" 
         id="first">
        <h1 style="color:green;">
          GeeksforGeeks
          </h1>
        <h4>
          Foundation CSS Sticky Advanced
          </h4>
    </div>
    <p class="margin-3">
        The Navigation Bar will stay stuck
          from the start of the above div.
    </p>
  
    <p class="margin-3">
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. Welcome to GFG.
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks.
        This is an example line. Welcome to GFG. 
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. Welcome to GFG. 
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. 
    </p>
  
    <p class="margin-3">
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. Welcome to GFG.
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks.
        This is an example line. Welcome to GFG. 
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. Welcome to GFG. 
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. 
    </p>
  
    <p class="margin-3">
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. Welcome to GFG.
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks.
        This is an example line. Welcome to GFG. 
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. Welcome to GFG. 
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. 
    </p>
  
    <strong class="margin-3"
            id="last">
        The navbar stops being sticky 
          from this paragraph.
    </strong>
    <p class="margin-3">
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. Welcome to GFG.
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks.
        This is an example line. Welcome to GFG. 
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. Welcome to GFG. 
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line.
    </p>
  
    <p class="margin-3">
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. Welcome to GFG.
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks.
        This is an example line. Welcome to GFG. 
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. Welcome to GFG. 
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line.
    </p>
  
    <p class="margin-3">
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. Welcome to GFG.
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks.
        This is an example line. Welcome to GFG. 
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. Welcome to GFG. 
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line.
    </p>
  
    <p class="margin-3">
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. Welcome to GFG.
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks.
        This is an example line. Welcome to GFG. 
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. Welcome to GFG. 
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line.
    </p>
  
    <p class="margin-3">
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. Welcome to GFG.
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks.
        This is an example line. Welcome to GFG. 
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. Welcome to GFG. 
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line.
    </p>
  
    <p class="margin-3">
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. Welcome to GFG.
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks.
        This is an example line. Welcome to GFG. 
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. Welcome to GFG. 
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line.
    </p>
  
    <p class="margin-3">
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. Welcome to GFG.
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks.
        This is an example line. Welcome to GFG. 
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line. Welcome to GFG. 
        This is an example line. 
        Hi Geeks!! Welcome to GeeksForGeeks. 
        This is an example line.
    </p>
  
    <script>
        $(document).ready(function() {
            $(document).foundation();
        })
    </script>
</body>
</html>


Output:

 

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



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