Archived topic
Sticky container
5 replies · Started by Anders Nielsen on May 29, 2022
Hi
I have found the code on the forum.. but can't get the containers to get sticky.
.sticky-main {
height: 100%;
}
.sticky-container {
position: sticky;
position: -webkit-sticky;
top: 50px; /* Offset from top of container */
}I have created two containers... where the second one should be sticky
Link in private section
Hi Anders,
The CSS won't work as you didn't add the class to your site's element.
Just to confirm, you want the sidebar to be sticky? Or the container in sidebar to be sticky?
Try this CSS to make the entire sidebar sticky.
@media (min-width: 769px) {
.sidebar > .inside-right-sidebar {
position: sticky;
position: -webkit-sticky;
top:50px;
}
}I want the container in the sidebar to be sticky.
And I have add the classes to the two containers.
sticky-main = the main container
sticky-container = the container which should flow with the user scroll.
The CSS you tried to use doesn't fit the logic/structure of your case.
In your case, the .sticky-main class needs to be added to theinside-right-sidebarelement which is not that easy.
So just do this:
.inside-right-sidebar {
height: 100%;
}
.sticky-container {
position: sticky;
position: -webkit-sticky;
top: 50px; /* Offset from top of container */
}Thanks
How can I make the right bar stack before the content and not after on mobile?
Try this:
@media (max-width: 768px) {
.is-right-sidebar.sidebar {
order: -1;
}
}