Foundation CSS Kitchen Sink Sticky
Last Updated :
21 Mar, 2022
Foundation CSS is an open-source and 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 and 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 Kitchen Sink has the foundation elements to work well in our websites and applications. The kitchen Sink 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.
Foundation CSS Sticky Class:
- sticky: This class enables the elements to be stuck to the specified position.
- cell small-* right: This class is used to create the small-sized cell of a specific number and 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, which avails the various functionalities to the element.
- [data-sticky-container]: This attribute can be used with sticky elements, that must be wrapped in a container, which will determine the sizing and grid layout.
Syntax:
<div class="columns size-6 ..."
data-sticky-container>
<div class="sticky" data-sticky data-margin-top="value">
<img class="thumbnail" src="...">
</div>
</div>
Kitchen Sink Sticky Components:
- Stick to Top: This is the default case that allows the sticky elements to get stuck to the top as the user scrolls. Add the sticky class and [data-sticky] to an element to create a sticky element.
- Stick to Bottom: Foundation CSS also provides another way to use sticky elements. 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”].
Example 1: The following code demonstrates how the sticky element gets stuck to the top as the user scrolls.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Kitchen Sink Sticky</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
<style>
.demo-column {
height: 4000px;
width: 70%;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<strong>Foundation CSS Sticky</strong>
<br>
<div class="row">
<div class="columns demo-column small-6" id="example1" data-something>
<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.
</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.
</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.
</p>
</div>
<div class="columns small-6 right"
data-sticky-container>
<div class="sticky"
data-sticky data-anchor="example1">
<img class="thumbnail float-right"
src=
/>
</div>
</div>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Kitchen Sink Sticky
Example 2: The following code demonstrates how the sticky element gets stuck to the bottom as the user scrolls.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
<style>
.demo-column {
height: 10000px;
width: 70%;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Foundation CSS Sticky</h3>
<div class="row">
<div class="columns demo-column small-6"
id="example1"
data-something>
<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.
</p>
<p id="example2">
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.
</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.
</p>
</div>
<div class="columns small-6 right"
data-sticky-container>
<div class="sticky"
data-sticky data-stick-to="bottom"
data-anchor="example1">
<img class="thumbnail float-right"
src=
/>
</div>
</div>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Kitchen Sink Sticky
Reference: https://get.foundation/sites/docs/kitchen-sink.html#sticky
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...