Jump to content

Sticky Section or Block

Recommended Posts

Hi,

I'm trying to add a sticky section or block to a page.

To make this easy to add to future pages without specifying particular block or section IDs, I am happy to apply it to all instances of a particular style or type of block, which would only be used for this purpose. I'm thinking either Heading 4 in a text block, or the Content Link block, unless you have a better suggestion.

Best example of this behaviour I can find is by Apple:

https://www.apple.com/au/ipad-air/

...note the main nav is not fixed, but the 'sub-nav' of iPad Air pages (Overview, Why iPad, etc) remains sticky at the top.

Any ideas?

Cheers :)

 

Link to comment
  • Replies 7
  • Views 2.6k
  • Created
  • Last Reply

Top Posters In This Topic

Well I think I figured this out through a lot more trial and error, and poring over the elements in the Chrome Inspector.

My 'sub-navigation' section is #2 on the page, so here's the basic code structure I used, inserted into the individual page Advanced code:

<style>
    .page-section:nth-child(2) {
        position: -webkit-sticky!important;
        position: sticky!important;
        top: 0px;
        z-index: 99999;
    }
</style>

I did not target the section ID because I wanted to make it easy to copy-paste to other pages.

After I got it functional I wanted it pretty, so I added more styling CSS to the body and sub-divs of nth-child(2) to shrink the vertical size and make the background transparent and blurry:

<style>
	body{
		background-color: white !important;
	}
    .page-section:nth-child(2) {
      	min-height: 5vh !important;
		background-color: inherit;
        position: -webkit-sticky!important;
        position: sticky!important;
        top: 0px;
        z-index: 99999;
    }
    .page-section:nth-child(2) > .section-background {
		background-color: rgba(255,255,255,.75) !important;
		backdrop-filter: blur(20px) !important;
		-webkit-backdrop-filter: blur(20px) !important;
	}
    .page-section:nth-child(2) > .content-wrapper {
      	padding-bottom: 0px !important;
	}
</style>

The background color was a nightmare. My code looks messy because I set the 'background-color' property three times here, but this is the only combination that worked for me where all sections have a white background.

If anyone knows how to just use the background color of the theme chosen for the section, and only add transparency in the CSS let me know 🙂

Link to comment
On 3/1/2021 at 9:16 AM, symean said:

Well I think I figured this out through a lot more trial and error, and poring over the elements in the Chrome Inspector.

My 'sub-navigation' section is #2 on the page, so here's the basic code structure I used, inserted into the individual page Advanced code:


<style>
    .page-section:nth-child(2) {
        position: -webkit-sticky!important;
        position: sticky!important;
        top: 0px;
        z-index: 99999;
    }
</style>

I did not target the section ID because I wanted to make it easy to copy-paste to other pages.

After I got it functional I wanted it pretty, so I added more styling CSS to the body and sub-divs of nth-child(2) to shrink the vertical size and make the background transparent and blurry:


<style>
	body{
		background-color: white !important;
	}
    .page-section:nth-child(2) {
      	min-height: 5vh !important;
		background-color: inherit;
        position: -webkit-sticky!important;
        position: sticky!important;
        top: 0px;
        z-index: 99999;
    }
    .page-section:nth-child(2) > .section-background {
		background-color: rgba(255,255,255,.75) !important;
		backdrop-filter: blur(20px) !important;
		-webkit-backdrop-filter: blur(20px) !important;
	}
    .page-section:nth-child(2) > .content-wrapper {
      	padding-bottom: 0px !important;
	}
</style>

The background color was a nightmare. My code looks messy because I set the 'background-color' property three times here, but this is the only combination that worked for me where all sections have a white background.

If anyone knows how to just use the background color of the theme chosen for the section, and only add transparency in the CSS let me know 🙂

Do you still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...

I am using this same code and it is working perfectly to add sticky blocks, however I need the content that follows to scroll up by pushing all the previous content up.

Right now the content that follows is scrolling up but behind the sticky images and it's not visible. 

Can someone help me with this?

 

 

 

 

Link to comment
  • 8 months later...

Hi @tuanphan, I'm having a little issue I believe is not super complicated to fix yet I'm stuck.
On the following page I created a sticky block on the right part of the page: maisonmariet.fr/cabas.
The code works because there is a spacer on the far right, so the page is divided in three columns. When I remove or reduce the spacer the following code doesn't work anymore:

section[data-section-id="YOURID"]{
  .span-4 {
    position: sticky;
    position: -webkit-sticky;
    top: 50px;

Could you please help me understand the problem and fix it?
Thanks in advance

Link to comment
23 hours ago, nicolusse88 said:

Hi @tuanphan, I'm having a little issue I believe is not super complicated to fix yet I'm stuck.
On the following page I created a sticky block on the right part of the page: maisonmariet.fr/cabas.
The code works because there is a spacer on the far right, so the page is divided in three columns. When I remove or reduce the spacer the following code doesn't work anymore:

section[data-section-id="YOURID"]{
  .span-4 {
    position: sticky;
    position: -webkit-sticky;
    top: 50px;

Could you please help me understand the problem and fix it?
Thanks in advance

I see it worked here. Can you check it again?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan, So sorry I forgot to add that I would like the sticky section to work without the spacing. Meaning that without it there would only be the images on the left and the text on the right. As of now, removing the spacer makes the code invalid. I juste removed the spacer so that you can see it doesn't stick anymore.

Edited by nicolusse88
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.