How To Make A Section Sticky On The Top? - Question | JoomShaper
🎃 Halloween Sale is Live! Get 35% OFF on all plans. Sale ends soon! Get Offer
Back to the questions

How To Make A Section Sticky On The Top?

J

Jhao-Siang

SP Page Builder 3 years ago

Hello,

I want to make a text message and navigation sticky on the top when the page scroll down. Does it posibile to make the section sticky as second menu? And I don't want to main menu sticky on the top.

I have try to use the css as below, but it doesn't work. { position:sticky; top:0; }

Thank you.

0
7 Answers
Order by
Oldest Newest Votes
Pavel
Pavel
Accepted Answer
3 years ago #46617

Hi. Position Sticky does not work if one of the parent elements has any of the overflow values as hidden and if there is a sufficient height for slipping. If you use Helix Ultimate this code will help you make Position Sticky start working

.body-innerwrapper {
        overflow-x: visible;
    }
0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #46483

Hi there!

Thanks for your query.

Please use position: fixed instead. Sample code for you:

section#section-id-1638809956904 {
    position: fixed!important;
    top: 0px;
    z-index: 999!important;
    width: 100%;
}

Please replace the section ID with yours, and a suitable heigher z-index value that suits you!

Note: Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Best Regards

0
J
Jhao-Siang
Accepted Answer
3 years ago #46504

Hi~

Thank you so much.

Yes, the section fixed on the top of the page. And I want to fixed it only when the page scroll down to the section. How can I modify it?

Best.

0
J
Jhao-Siang
Accepted Answer
3 years ago #46633

Hi Pavel,

Thank you so much. It does what I need. And thanks for your explanation.

0
Pavel
Pavel
Accepted Answer
3 years ago #46653

You are wellcome

0
W
[email protected]
Accepted Answer
7 months ago #188495

I have a similar question:

on my layout I have above the compont are a section (row) called "teaser". its directly below the header. The header coints main-menu and is fix.

how can I now fix the section "teser" that it does not scroll? I tried in the custom css with following code but it doesnt work:

section#section-id-teaser { position: fixed!important; // top: 0px; z-index: 999!important; width: 100%; }

to explain it better I made a screen shot. My target is that only the component area scrolls and the sections teaser, position1, position2, postion 3 remained fix.

http://vorbereitung.tsv-malsch.de/index.php/eroeffnungsseite-mitgliederbereich/test-new-home/?tp=1

0
Pavel
Pavel
Accepted Answer
7 months ago #188573

section#section-id-teaser { position: fixed!important; // top: 0px; z-index: 999!important; width: 100%; }

Hi.

Your code is not working because a non-existent selector is being used. Use Dev Tools to identify the correct selector.

Any caching and compression should be turned off and cleared during the development period. This should only be enabled after the site is fully ready for operation. Disable it, otherwise, your CSS changes will not be applied immediately.

0