symean Posted February 27, 2021 Posted February 27, 2021 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 :)
symean Posted March 1, 2021 Author Posted March 1, 2021 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 🙂
tuanphan Posted March 3, 2021 Posted March 3, 2021 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!)
ingried Posted July 6, 2021 Posted July 6, 2021 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?
nicolusse88 Posted March 22, 2022 Posted March 22, 2022 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
tuanphan Posted March 23, 2022 Posted March 23, 2022 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!)
nicolusse88 Posted March 23, 2022 Posted March 23, 2022 (edited) @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 March 25, 2022 by nicolusse88
nicolusse88 Posted March 25, 2022 Posted March 25, 2022 @tuanphanNo need to look into it anymore, I found the solution with .span-6 (or .span-5 if I want a smaller spacer).
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment