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.
The Sticky Component allows you to make something that stays stuck to the top of the page, while the user scrolls down the page. These components can be utilized to make the sidebars, external links, or topbars. The .sticky class and [data-sticky] attribute is used with an element to create a sticky element. Sticky elements must be wrapped in a container with [data-sticky-container] attribute, which determines the sizing and grid layout.
Syntax:
<div class="Container-Name" data-sticky-container>
<div class="sticky" data-sticky data-margin-top="value">
<img class="thumbnail" src="image_source">
</div>
</div>Sticky Components:
- Basic: This component can be used to create something that sticks, by specifying the .sticky class and [data-sticky] attribute to an element.
- Advanced: In this case, we can use 2 anchor points i.e the startpoint and endpoint of the sticky using data-top-anchor & data-btm-anchor attributes, having the “idOfSomething” as their values, for the top and bottom anchor points respectively.
- Stick to Top: This is the default case that allows the sticky elements to get stuck to the top, as the user scrolls.
- Stick to Bottom: This attribute provides another way to use sticky elements. 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 [data-stick-to=”bottom”].
- Sticky Navigation: It allows to add a sticky navbar or side nav by specifying the .sticky class to your top bar. Here, the title bar is wrapped inside a sticky container. Adding a data-sticky attribute to the .title-bar class makes it a sticky navbar. The .title-bar-left class and .title-bar-right class are the classes where you can display your information/ content for the navbar.
Syntax for adding the sticky navigation:
<div data-sticky-container>
<div class="title-bar" data-sticky data-options="marginTop:0;">
<div class="title-bar-left"> Content </div>
<div class="title-bar-right"> Content </div>
</div>
</div>Foundation CSS Sticky Class:
- .sticky: This class enables the elements to be stick to the specified position.
- cell small-* right: This class is used to create the small-sized cell of a specific number & is aligned to the right-hand side position. We can also specify the different alignment position.
Foundation CSS Sticky attributes:
- [data-sticky]: The .sticky class is followed with this attribute, that avails the various functionalities to the element.
- [data-sticky-container]: This attribute can be used to with sticky elements, that must be wrapped in a container, which will determined the sizing and grid layout.
Example: This example illustrates the Foundation CSS Sticky.
HTML
<!DOCTYPE html> <html>
<head>
<!-- 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 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">
<img class="thumbnail" src=
</div>
</div>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Sticky
Example: The following code is an example of sticky navigation. Even though the page is being scrolled but the position of the title bar remains constant.
HTML
<!DOCTYPE html> <html>
<head>
<!-- Compressed CSS -->
<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;">
<div class="title-bar-left">
<span class="title-bar-title">
GeeksforGeeks
</span>
</div>
<div class="title-bar-right">
<ul class="dropdown menu align-right" data-dropdown-menu>
<li> <a href="#">GFG 1</a>
<ul class="menu">
<li><a href="#">GFG 1A</a></li>
<li><a href="#">GFG 1B</a></li>
</ul>
</li>
<li> <a href="#">GFG 2</a>
<ul class="menu">
<li><a href="#">GFG 2A</a></li>
<li><a href="#">GFG 2B</a></li>
</ul>
</li>
<li><a href="#">GFG 3</a></li>
<li><a href="#">GFG 4</a></li>
</ul>
</div>
</div>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Foundation CSS Sticky Navigation</h3>
<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>
</center>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Sticky Navigation
Reference: https://get.foundation/sites/docs/sticky.html