Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Sticky Section or Block


symean

Question

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
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

3 answers to this question

Recommended Posts

  • 0

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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

Create an account or sign in to comment

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


×
×
  • Create New...