In this article, we will see how to make a div fixed after you scroll to it by using the position property with a sticky value. This effect is generally used on websites when an important message needs to be shown. Set the property position to sticky to create elements that behave as fixed positions whenever the user scrolls to that position.
Fixing the Div after scrolling using position: sticky
- In the HTML file create a div that you want to make fixed on scroll.
- Apply the sticky property to a div in the CSS file.
- Here, the property position is set to the sticky to the specified element making the div named “sticky” fixed after you scroll to that div.
- Apply the position using top, bottom, left, or right properties according to position where it should be fixed.
Example 1: The below code is for designing a page where the div is fixed on scrolling to it.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
.container {
height: 1500px;
}
.sticky {
position: sticky;
top: 20px;
background-color: rgb(32, 165, 20);
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<p>Please Scroll down</p>
<div class="sticky">
<p>This div will be fixed after scrolling to it</p>
</div>
<p>
Web Design is a field related to designing
websites on the Internet. Without a good design,
a website fails to perform well and cannot produce
a good impact on the user. Design is a creative
process that affects the ranking of the brand.
A good website design helps to create an engaging
online presence that captivates the audience. Each
distinct day gives you an opportunity to learn,
progress, and do the things that push you toward
your goals or that make you satisfied at the end of
the day. Web Design helps to make your web pages stand
out in terms of design and user experience. It
integrates technical and creative skills, by which
you can build and maintain web pages very easily.
</p>
</div>
</body>
</html>
|
Output:
Fixing the Div after scrolling using position: fixed
- In the HTML file create a div that you want to make fixed on scroll.
- For Defining the styles for the sticky div element named “sticky”. Sets the position to fixed, making it stick to the top of the viewport after scrolling to a certain point.
-
Set top to 20pxpositions the sticky div 20 pixels from the top and setwidth to 100vwmakes the div full width of the viewport. -
Set the margin-bottom to 20pxadds spacing below the fixed div.
Example 2: The below code is for designing a page where the div is fixed on scrolling to it.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
.container {
height: 1500px;
}
.sticky {
position: fixed;
top: 20px;
width: 100vw;
height: 25px;
font-weight: 700;
background-color: rgb(155, 204, 32);
color: white;
padding-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<p>Please Scroll down</p>
<div class="sticky">
<p>This div will be fixed
after scrolling to it
</p>
</div>
<p>
Web Design is a field related to designing
websites on the Internet. Without a good
design, a website fails to perform well
and cannot produce a good impact on the
user. Design is a creative process that
affects the ranking of the brand. A good
website design helps to create an engaging
online presence that captivates the audience.
Each distinct day gives you an opportunity
to learn, progress, and do the things that
push you toward your goals or that make you
satisfied at the end of the day. Web Design
helps to make your web pages stand out in
terms of design and user experience.
It integrates technical and creative skills,
by which you can build and maintain web pages
very easily.
</p>
</div>
</body>
</html>
|
Output: