Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a sticky element with CSS?
On a web page, we can easily create an element and position it sticky i.e., that specific element will remain stick even when the web page is scrolled. This is achieved using the position property with the value sticky.
Create a div for the sticky element
Set a parent div container −
<div class="sticky">Sticky Element</div>
<p style="font-size: 35px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vel dolore delectus esse consequatur at nulla, consequuntur sint quas ea. Incidunt, ex. Consequatur ipsa earum veritatis fugiat iusto, doloremque sunt beatae quaerat laboriosam nemo soluta quidem porro quia. Dolore reprehenderit cum voluptatibus eius assumenda ipsam tenetur asperiores magni aliquid eligendi doloribus quidem ipsa et praesentium provident molestias quaerat laboriosam, veniam aspernatur repellendus. Debitis sapiente, odit iste voluptatibus nesciunt veritatis incidunt mollitia nostrum, vitae suscipit iusto molestias consequuntur rem facere perspiciatis ad! Ratione reiciendis asperiores aperiam vitae facilis accusantium non aliquid, facere cupiditate reprehenderit tempore veritatis eum accusamus omnis tempora quos!
</p>
Position the container
The container is positioned sticky using the position property with the value sticky. The top property is set to the value 0 to make the container appear on the top when the web page is scrolled −
div.sticky {
position: sticky;
top: 0;
background-color: rgb(52, 21, 110);
color: white;
padding: 50px;
font-size: 20px;
}
Product the scroll
The height property is used for the web document to make the scroll appear when the web page is scrolled −
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0px;
padding: 0px;
height: 150vh;
}
Example
To create a sticky element with CSS, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0px;
padding: 0px;
height: 150vh;
}
div.sticky {
position: sticky;
top: 0;
background-color: rgb(52, 21, 110);
color: white;
padding: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Sticky Element Example</h1>
<h2>Random Header Text</h2>
<h2>Randorm Header Text</h2>
<div class="sticky">Sticky Element</div>
<p style="font-size: 35px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vel dolore delectus esse consequatur at nulla, consequuntur sint quas ea. Incidunt, ex. Consequatur ipsa earum veritatis fugiat iusto, doloremque sunt beatae quaerat laboriosam nemo soluta quidem porro quia. Dolore reprehenderit cum voluptatibus eius assumenda ipsam tenetur asperiores magni aliquid eligendi doloribus quidem ipsa et praesentium provident molestias quaerat laboriosam, veniam aspernatur repellendus. Debitis sapiente, odit iste voluptatibus nesciunt veritatis incidunt mollitia nostrum, vitae suscipit iusto molestias consequuntur rem facere perspiciatis ad! Ratione reiciendis asperiores aperiam vitae facilis accusantium non aliquid, facere cupiditate reprehenderit tempore veritatis eum accusamus omnis tempora quos!
</p>
</body>
</html>
Updated on: 14-Dec-2023
173 Views
Advertisements
To Continue Learning Please Login