Sticky Section or Block

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 :)

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 🙂

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?

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?

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

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?

@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.

@tuanphanNo need to look into it anymore, I found the solution with .span-6 (or .span-5 if I want a smaller spacer).