Jump to content

STICKY SECTION- sticks but sections below it scroll over it not under it

Recommended Posts

Hi,

https://cone-mandarin-7sb7.squarespace.com/listing-template

Password: PW

I'm trying to make a section on a page stick at the top pf the window on scroll, 

I am using this code:

section[data-section-id="65e5aa0e55845964ef4f58ec"].page-section {
position: sticky!important; 
top: 0px!important;
  z-index:0;

It does stick but as I scroll down to the next section, the sticky section looks like it is positioned behind the sections below it, so gets covered up.

 

Any help appreciated!

Edited by TheRaffCreative
Link to comment
  • TheRaffCreative changed the title to STICKY SECTION- sticks but sections below it scroll over it not under it
  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

If you're just doing it with custom code, you might try making the z-index higher.. generally you want it to be as low as possible but high enough to stay above everything else.. try:

z-index: 999;

It may go above some other elements on the page though (like the header maybe if you have that sticky also), so just lower the number until it's above everything else but below anything you want it to be behind. You could also just try z-index: 1; and see if that does the trick.. sometimes everything else on the page is already set for 0, so just upping it to 1 will do it.

Sometimes if I'm testing from the lowest end, I'll try 1 first, if that doesn't work, try 10, if that doesn't work, try 100, etc. it doesn't matter what the number is as long as it's higher than everything else on the page (which is default 0).

For the interested nerds like me—if you think of an x, y, z axis in geometry, the x and y axes are the horizontal and vertical directions of a flat plane.. the z pushes us into 3D space and comes out from the screen towards you, or goes behind the screen into the background.. the z-index is the level of that z plane, and the default is 0 (that's when things sit flat on the x/y plane).

9KgUe.webp

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.