Have you ever wanted a section to be sticky when scrolling to it and be fixed?
For years we have been using jQuery to target a specific section and then add a class name. Once this class name has been added to add some custom CSS to make it fixed and set the position. This could cause headaches as sometimes the size would change or at the bottom, it would overflow the text or images of other section. It would become a big task to get it looking perfect.
Fear not, with this simple piece of code, you can avoid all this and get it working first time, so easily.
You can add a class to the section, column or row – lets say “sticky-section” or even modify our CSS below to target the section you already have.
This is all the code you need to add – I know, crazy right?
Want to see a live example? Well look at our sidebar on this page, this is how we do it.
The code “postion: sticky” will automatically stop the section from being fixed when it hits the end of the area and reaches another section below.
The only other bit of code you need is to make the page-container overflow visible. If it has hidden, it won’t work.
Are you astounded as much as I was when first discovered this?
Want to do some other cool things? Check below an example
Just some dummy text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Fixed Section
Just some dummy text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Fixed Section
Fixed Section
Just some dummy text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This is exactly what I needed so thank you! The only issue I’m running into is if I add “sticky-section” to the right side column it only scrolls until the end of that row. How would I make it so the right column is sticky until the end of the section?
http://staging-keukalakesideinn.kinsta.cloud/accomodations/single-queen-bed/
Thanks in advance,
Dave
Hi Pete,
Has something changed in the function of this? I have two of these on a site which I found are no longer working (they were working yesterday), so I came here to see if your demo was working and it isn’t, even in incognito and on mobile device. Any ideas?
Found the problem. You need to add position: initial to the body of the site – try this.
I have updated the code above
FYI –
body {
display: initial;
}
Awesome, thanks!
Hey there, would you be so kind to provide a custom ccs to deactive the effect on mobile?
Thank you!
See below, change 981, to be the number you want when you want it to stop
@media (min-width: 981px) {
.sticky-section {
position: sticky;
position: -webkit-sticky;
top: 80px; /* Change the height from the top here */
}
}
Actually this will not work as it is exactly the same code as when we want it to stick.
This is what worked for me:
@media (max-width: 981px) {
.sticky-section {
position: static;
position: -webkit-static;
}
}
The media query should be max-width, not min-width. And the position value should be static, not sticky (as it is already is sticky on larger screens).
Also, remember to add the sticky-section class to the column, not the module itself.
I tried to make that “Fixed Section” Element working in Divi-page, so that it stays sticky until the bottom of a section reaches the top of the window – but I can’t get it to work at all.
Would you be so kind to explain, what you have done, to make that two “Fixed Section”-Elements stay sticky and then scroll away like on this page?
Thanks in Advance…
Not sure what you mean by two fixed sections? Can you send me a link to your website where you want it to be sticky so I can see?
Does this CSS class work on individual modules? I see that it worked on my rows, but I only want one side module to sticky while the rest of the page scrolls. thanks.
I think you will need to have a column layout where the sticky module is on the side whereas the rest of the modules are on the other. Put it all in the same section, then it should work well.
Hi there, I’m trying to make the words “You shouldn’t have to choose.” on the left column be sticky as I scroll the right column. Here’s my test page: https://theclevernod.com/test-sticky/
Any advice?
Hi. I tried to go to your test URL, but nothing shows
Sorry, this doesn’t work for me (yet). I added the CSS code to my child theme via Appearance > Customize > Additional CSS. Could it have something to do with the fact that my menu bar on the top of the page is fixed?
What are you trying to stick? Can you send me a link to the page so I can check?
This is great! I have a sidebar on my blog which i want to fix to the screen when scrolling but unfortunately the code doesnt seem to work unless theres content/module directly below the section I want to stick.
I have a special section (where the side bar is) and then a normal section below it, and it wont work. If I put a dummy module below the sidebar it sticks.
Am I missing something?
Thanks
That is interesting – do you have an example URL of when you have it with there is no content below?
Can you please try make your columns equal heights using the Divi Builder. In the row, Design tab – enable “equalize column heights”
This didnt work, would this have anything to do with the fact we’re using a speciality section (it’s the first one, second row in the options)?
I can only equalize the column height where the blog posts are, the sidebar is just a sidebar module.
Not sure on your set up but it needs to have the same heights to work properly. Equalise the heights of the two columns and it will work.
Yes, its due the the Speciality section. I just changed the column to regular and now its working. Thanks!
Perfect, thanks!
Hey, Peter, Sorry man. This hasn’t worked too well for me. Do I need to go to Section Settings >> Custom CSS >> Main Element and paste this code?
.sticky-section {
(error1->[Expected RBRACE])
position: sticky;
position: -webkit-sticky;
(error2->[Expected static|relative|absolute])
top: 80px; /* Change the height from the top here */
}
#page-container {
overflow: visible !important;
}
No – you add the CSS in Divi > Theme Options > Custom CSS
Super 😀
Just awesome and simple! Thank Peter.
Pleasure my friend! Have a great week