07-26-2023, 07:33 PM
Description:
Sticky positioning allows elements to stick to a specific position relative to the viewport when scrolling. It's useful for creating sticky navigation bars or sidebars.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Sticky Positioning Example</title>
<style>
.sticky-element {
position: sticky;
top: 20px;
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div class="sticky-element">This element sticks to the top when scrolling.</div>
<div style="height: 1000px;"></div>
</body>
</html>
Sticky positioning allows elements to stick to a specific position relative to the viewport when scrolling. It's useful for creating sticky navigation bars or sidebars.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Sticky Positioning Example</title>
<style>
.sticky-element {
position: sticky;
top: 20px;
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div class="sticky-element">This element sticks to the top when scrolling.</div>
<div style="height: 1000px;"></div>
</body>
</html>