First, you can preview the blog: https://blog.csdn.net/qq_44327851/article/details/135149046 to briefly review the relevant knowledge of positioning. Closer to home, in actual development and application, we will undoubtedly find that the most contacted positioning is absolute, relative, and for sticky positioning, we may not think of it all at once during development. So what is sticky positioning, and in what scenarios is it generally used? Let’s explore together!
concept:
position: sticky is a positioning method in CSS that allows an element to be fixed at a specific position when scrolling, and does not start scrolling until it reaches a specific position. It creates dynamic effects and is a combination of relativeand fixed.
Features:
- When the element is visible on the screen, it behaves like position: relative; when the element is not visible on the screen, it behaves like position: fixed.
- When scrolling to the element's position, the element will be fixed at the specified position until scrolled to another specified position.
- An element's fixed position is relative to the nearest ancestor element that has a scrollbar.
Example:
Let's say we have a navigation bar that should stay fixed at the top of the page when the user scrolls down the page. When the user scrolls up, the navigation bar should return to its original position.
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: #f1f1f1;
padding: 10px 0;
}
.content {
padding: 20px;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
<div class="content">
<h3>Sticky Navigation Bar Example</h3>
<p>Scroll this page to see the effect. When you scroll this page, the navigation bar will stick to the top of the page.</p>
</div>
</body>
</html>Failure situation:
- The parent element cannot be set to overflow:hidden or overflow:auto : When the parent element is set to overflow:hidden or overflow:auto, sticky positioning may fail. Because sticky positioning needs to be determined based on the scrolling of the parent element, if the parent element sets overflow:hidden or overflow:auto, this scrolling behavior may be affected.
- At least one value from top, bottom, left, or right must be specified : if any of these values are not specified, the element will only be in a relative positioning state and will not behave as sticky positioning.
- The height of the parent element cannot be lower than the height of the sticky element : If the height of the parent element is lower than the height of the sticky element, then the element will not be able to maintain its fixed position when it reaches the bottom.
- Sticky elements only take effect within their parent elements : sticky positioning is relative to its nearest ancestor element that has a scroll bar. If there is no scroll bar ancestor element, sticky positioning may fail.
Precautions:
- When using position: sticky, you need to make sure to test on a browser that supports this feature, as some older browsers may not support this feature.
- When using position: sticky, you need to pay attention to whether the parent element of the element has a scroll bar, because sticky positioning needs to be effective relative to the nearest ancestor element with a scroll bar.
- In some cases, the height of the scroll container may affect the performance of sticky elements, and the height of the scroll container and the position of the sticky element need to be carefully considered.