|
A sticky element is a positioning technique in CSS that allows an element to behave like a relatively positioned element until a specific scroll position is met, after which it behaves like a fixed element. This is particularly useful for creating sticky headers, sidebars, or any other UI elements that need to remain visible while scrolling.
There are two main approaches to creating a sticky element using CSS:
Using position: stickyThe sticky element is made to stick at the top position by the following syntax and code. that will help us to create the sticky element that will stick to the top.
Syntax:.sticky-element {
position: sticky;
}Example: This example shows the use of position sticky for creating a sticky element.
HTML
<!DOCTYPE html>
<html>
<head>
<title> GeeksforGeeks </title>
<style>
.container {
height: 200vh;
}
.sticky-element {
position: sticky;
top: 0;
background-color: #f1f1f1;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="sticky-element">
I'm a sticky element!
</div>
<p>
Introduction The day I started to work as
content writer
for GeeksforGeeks on December 13th, 2023,
was a combination
of excitement and anticipation. The membership in
a well-known platform not only lets me share my
knowledge but also connect with a worldwide
audience of tech lovers. At that time, I did
opportunity would become a major turning point
influencing my growth and development as a
significant ways. Embracing the Opportunity
with its comprehensive collection of technical
community, was the platform where I could make a
significant contribution to it. The idea of being
able to communicate my skills in subjects
from algorithms to programming languages
and humbling. I gladly took the opportunity to
study the detailed technical subjects, knowing that
every article was a chance to get through and
educate the world’s readers.
</p>
</div>
</body>
</html>
Output:
Using position:fixed with JavaScriptIN this approach, we are using the position fixed so that we can fix the position of an element. The element is sticked to the fixed position of the viewport by the following syntax and code.
Syntax:.sticky-element {
position: fixed;
}Example: This example shows the use of position fixed for creating a sticky element.
HTML
<!DOCTYPE html>
<html>
<head>
<title> GeeksforGeeks </title>
<style>
.container {
height: 200vh;
}
.sticky-element {
position: fixed;
top: 0;
left: 0;
background-color: #f1f1f1;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="sticky-element" id="stickyElement">
I'm a sticky element!
</div>
<br/>
<br/> <br/>
<!-- Paragraph containing the introduction text -->
<p>
The day I started to work as a freela
writer for GeeksforGeeks on December
The membership in a well-known platform n
me share my knowledge but also connect
that this opportunity would become a
in my career thus influencing my growt
as a writer in the most significant ways.
Embracing the Opportunity GeeksforGee
comprehensive collection of technical
active community, was the platform w
a significant contribution to it.
</p>
<script>
const stickyElement = document.getElementById('stickyElement');
const stickyOffsetTop = stickyElement.offsetTop;
window.addEventListener('scroll', function() {
if (window.pageYOffset >= stickyOffsetTop) {
stickyElement.classList.add('sticky');
} else {
stickyElement.classList.remove('sticky');
}
});
</script>
</div>
</body>
</html>
Output:
|
-768.jpg){kind=small}
