Position:sticky is a CSS property that allows elements to stick to the top of the screen when the user scrolls down. This can be useful for things like headers or navigation menus. However, there are some drawbacks to using this property. In this post, we will explore how to use position:sticky and why it doesn't always work as intended.
To explain how it works, I will use the following example template:
In this template, we have the structure of a web page with a header, a main, a sidebar, and a footer. As you can see, when scrolling, everything stays in its position, but ideally, we would like to see the sidebar content while viewing the content of the main, so we will apply sticky positioning there.
Before applying sticky positioning to an element, we must consider the following points:
1.- The parent element (container of the element to which we will apply position:sticky) must be larger in height or width than the child element (container to which we will apply sticky positioning).
2.- None of the ancestors of the parent or child element should have the property overflow:hidden. In many cases, this is the reason why sticky positioning doesn't work for you, so be careful with this.
Applying sticky positioning to sidebar content
Sticky makes the element behave like position:relative until, due to the page scroll, the element is reached by the top of the viewport (it's not exactly like this, but it's the most common usage). At that moment it behaves like fixed, and for it to work correctly, at least one value for top, bottom, left, or right must be specified, depending on whether it will be sticky in horizontal or vertical scrolling.
That said, let's proceed to apply sticky positioning in sidebar contentof the previously mentioned template
Sidebar content with the class: sticky-contentis inside the element with class: sidebar-wrapperwhich is in turn inside the main tag.
<main class ="container"><div class="main-wrapper"><h1>MAIN CONTENT</h1></div><div class="sidebar-wrapper"><div class="sticky-content"><h1>SIDEBAR CONTENT<h1></div></div></main>
The height of the element sidebar-wrapper, is given by the height of the sibling element: main-wrapper therefore both elements will have the same height
.main-wrapper{height: 1000px;}
We add the property position:sticky, to the element contenido-sticky
.contenido-sticky{background: green;position: sticky;top:0;}
Once the sticky positioning is added, it looks like this:
As you can see, when the element is reached by the top of the viewport, it behaves like fixed. The element will behave like fixed until its bottom hits the bottom of its parent element.
Cases where sticky positioning will not work:
1.- When the size of the parent element is equal to that of the child element or when the parent element is not scrollable, as in the following case:
2.- When the ancestors of the parent or child element have the propertyoverflow:hidden... In many cases, this is the reason why sticky positioning does not work for them, so be careful with this.
Code used in template No. 2:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Example: position:sticky</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}body{max-width: 1000px;width: 100%;margin: 0 auto}header,footer,main{text-align: center;color: white;}header,footer,.main-wrapper{display: flex;align-items: center;justify-content: center;}header{background: red;}footer{background-color: blue;height: 400px;}main.container {display: grid;grid-template-columns: 60% 40%;}.main-wrapper{background: #746a6a;height: 1000px;}.sidebar-wrapper{background: #ff6a00;}.sticky-content{background: green;position: sticky;top:0;}h1{padding: 2rem 3rem;}p{padding: 0 3rem 1rem 3rem;}</style></head><body><header class ="container"><h1>HEADER</h1></header><main class ="container"><div class="main-wrapper"><h1>MAIN CONTENT</h1></div><div class="sidebar-wrapper"><div class="sticky-content"><h1>SIDEBAR CONTENT</h1></div><h1>SIDEBAR</h1></div></main><footer class ="container"><h1>FOOTER</h1></footer></body></html>
Post a Comment
Hello! We're so glad you've made it this far and are reading this article on Edeptec.
This form is an open space for you: you can leave a comment with your questions, suggestions, experiences, or simply your opinion on the topic discussed.
» Did you find the information helpful?
» Do you have any personal experiences you'd like to share?
» Do you have any topics you'd like to see covered in future articles?
Remember that this space is for learning and sharing, so we encourage you to participate respectfully and constructively. Your comments can help other readers who are on the same path, whether in electronics, programming, sports, or technology.
Thank you for being part of this learning community! Your participation is what makes this project grow.