The CSS position property sets the position for an HTML element. It is also used to place an item behind another element and is useful for the scripted animation effect. The "position: sticky;" is used to position the element based on the user's scroll position.
This CSS property, called position: sticky, enables elements to remain fixed on the screen once the scroll reaches a specific point. As the user scrolls, a sticky element transitions between being fixed and relative. Initially, the element is positioned relative within the document flow. However, once it reaches a defined offset position within the viewport, it behaves like a fixed element, staying in place on the screen.
Illustrations of the CSS Position: Sticky
Let's gain a better understanding of CSS properties through visual aids.
Illustration 1:
We are going to generate the sticky component in this example using CSS.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Illustration of CSS Sticky Position</title>
<style>
body {
text-align: center;
}
.bottom {
padding-bottom: 2000px
}
.sticky-position {
position: sticky;
font-size: 20px;
font-weight: bold;
top: 50px;
padding: 10px;
background-color: lightblue;
border: 1px solid blue;
}
</style>
</head>
<body>
<h1>Scroll and see the effect</h1>
<div class="sticky-position">Sticky Element</div>
<div class="bottom">
<h2>Hello World</h2>
<p>Welcome to C# Programming</p>
</div>
</body>
</html>
Output:
We can observe from the result that the HTML element highlighted in sky blue remains stationary even while scrolling because it is a sticky element, thus maintaining its position on the screen.
Illustration 2:
We'll build the sticky navigation bar using the CSS sticky positioning in this demonstration.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Illustration of the Sticky Navbar</title>
<style>
body {
padding: 0;
margin: 0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.stickyNavbar {
position: sticky;
top: 0;
background-color: rgb(248, 148, 148);
padding: 10px;
}
a {
padding: 20px;
}
</style>
</head>
<body>
<div class="stickyNavbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Facilities</a>
<a href="#">Contact us</a>
</div>
<div>
<p>
Text line 1 <br>
Text line 2 <br>
Text line 3 <br>
Text line 4 <br>
Text line 5 <br>
Text line 6 <br>
Text line 7 <br>
Text line 8 <br>
Text line 9 <br>
Text line 10 <br>
Text line 11 <br>
Text line 12 <br>
Text line 13 <br>
Text line 14
</p>
</div>
</body>
</html>
Output:
We observe in the result that the navigation bar does not shift while scrolling because it is a sticky element, ensuring its fixed position on the screen.
Illustration 3:
We'll create one fixed primary title and two fixed subheadings using the CSS sticky positioning feature in this example.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Illustration of making the sticky paragraph heading</title>
<style>
body {
font-family: 'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
}
.sticky-paragraph {
top: 0;
position: sticky;
background-color: rgb(26, 203, 144);
}
p {
font-size: 25px;
background-color: rgb(157, 211, 193);
}
</style>
</head>
<body>
<h1 class="sticky-paragraph">Introduction of CSS Sticky</h1>
<p>
<br> <br> <br> <br> <br> <br>
Some text
<br> <br> <br> <br> <br> <br>
</p>
<h2 class="sticky-paragraph">Sticky Postion</h1>
<p>
<br> <br> <br> <br> <br> <br>
Some text
<br> <br> <br> <br> <br> <br>
</p>
<h2 class="sticky-paragraph">Use of CSS Sticky Position</h1>
<p>
<br> <br> <br> <br> <br> <br>
Some text
<br> <br> <br> <br> <br> <br>
</p>
</body>
</html>
Output:
We can observe in the result that the primary title and two subsection titles remain fixed in their position while scrolling due to being sticky elements.
Illustration 4:
We are going to build a sidebar and make it stick to the screen using the CSS sticky positioning method in this example.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Illustration of sticky sidebar</title>
<style>
body {
padding: 0;
margin: 0;
font: bold;
font-family: Georgia, Times, 'Times New Roman', serif;
background-color: bisque;
}
.sticky-sidebar {
top: 0;
padding: 25px;
width: 150px;
position: sticky;
background-color: rgb(234, 168, 99);
}
.mainText {
padding-bottom: 1000px;
}
</style>
</head>
<body>
<div class="sticky-sidebar">
<h2>Sidebar</h2>
<ul>
<li>
<a href="#">Link to Page 1</a>
</li>
<li>
<a href="#">Link to Page 2</a>
</li>
<li>
<a href="#">Link to Page 3</a>
</li>
<li>
<a href="#">Link to Page 4</a>
</li>
<li>
<a href="#">Link to Page 5</a>
</li>
<li>
<a href="#">Link to Page 6</a>
</li>
</ul>
</div>
<div class="mainText">
<br> <br> <br> <br> <br> <br>
<p>Some text</p>
</div>
</body>
</html>
Output:
We can observe that the sidebar stays fixed in its position even when the page is scrolled, thanks to its sticky positioning.
Browser Compatibility
The browsers that support the CSS sticky are given below:
- Internet Explorer
- Firefox
- Safari
- Google Chrome
- Opera
Conclusion
We have explored the CSS sticky feature in this article. CSS sticky is a value set for the CSS position attribute to ensure that the HTML element remains fixed in position once it reaches a specific point.