- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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?
To create a sticky element with CSS, the code is as follows −
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0px;
padding: 0px;
height: 150vh; /*To produce scroll bar*/
}
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>Output
The above code will produce the following output −
On scrolling down a little the element will act as fixed −
Updated on 07-May-2020 12:49:20
- Related Questions & Answers
- How to create a sticky image with CSS?
- Create a sticky navbar with CSS
- How to create a fixed/sticky footer with CSS?
- How to create a "sticky" navbar with CSS and JavaScript?
- How to create a fixed/sticky header on scroll with CSS and JavaScript?
- CSS position: sticky;
- How to create a draggable HTML element with JavaScript and CSS?
- Role of CSS position: sticky;
- How to create a pagination with CSS?
- How to create a Calendar with CSS?
- How to create a preloader with CSS?
- How to create a transition effect with CSS?
- How to create a Menu Icon with CSS?
- How to create a Hoverable Sidenav with CSS?
- How to create a vertical menu with CSS?
Advertisements