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.

http://staging-keukalakesideinn.kinsta.cloud/accomodations/single-queen-bed/

Thanks in advance,
Dave

Awesome, thanks!

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;
}

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?

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 */
}
}


Thank you!

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?

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. I tried to go to your test URL, but nothing shows

Any advice?

What are you trying to stick? Can you send me a link to the page so I can check?

Perfect, thanks!

Yes, its due the the Speciality section. I just changed the column to regular and now its working. Thanks!

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.

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.

Can you please try make your columns equal heights using the Divi Builder. In the row, Design tab – enable “equalize column heights”

No – you add the CSS in Divi > Theme Options > Custom CSS

That is interesting – do you have an example URL of when you have it with there is no content below?

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

.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;
}

Pleasure my friend! Have a great week