Sticky Columns in Fluid Engine?

https://beehyve.squarespace.com/payment-policy

I want to add a sticky sidebar (made of various blocks) and apply it to multiple pages.

In 7.1 classic editor, I could make the sidebar blocks collectively sticky by targeting the column within the section, using the code below. Super quick and easy.

Is there a way to do this in fluid engine? Feels a lot cleaner than having to target each block for different top heights, especially as I want to add it to a few pages.

section[data-section-id="...."] .sqs-layout > .sqs-row > .sqs-col-3 {
	position: sticky!important;
	position: -webkit-sticky!important;
	top: 140px;
    z-index: 99999;
    }

Thanks all!

Do Sidebar as first block, then use this code

section[data-section-id="...."] .fluid-engine>.fe-block:first-child {
	position: sticky!important;
	position: -webkit-sticky!important;
	top: 140px;
    z-index: 99999;
    }

First block means block which you added first in that section. 

Hi @tuanphan ! Thanks for sharing this piece of code - useful as usual ! 

I applied it to a website I'm currently working on, using :last-child instead.

section[data-section-id="...."] .fluid-engine>.fe-block:last-child {
    position: sticky!important;
    position: -webkit-sticky!important;
    top: 140px;
    z-index: 99999;
    }

I have in this column two text blocks and a form block. The code only applies to the form block. 😅

Is there something I'm missing here ?

Website is https://bear-lanternfish-zpj9.squarespace.com/entreprise-coaching-professionnel 
Password = inesse.
This is the third section.

Any feedback would be appreciated ! 🙏🙏

Thank you !
Laura

On 9/29/2023 at 10:14 PM, Laura16Bits said:

Hi @tuanphan ! Thanks for sharing this piece of code - useful as usual ! 

I applied it to a website I'm currently working on, using :last-child instead.

section[data-section-id="...."] .fluid-engine>.fe-block:last-child {
    position: sticky!important;
    position: -webkit-sticky!important;
    top: 140px;
    z-index: 99999;
    }

 

I have in this column two text blocks and a form block. The code only applies to the form block. 😅

Is there something I'm missing here ?

Website is https://bear-lanternfish-zpj9.squarespace.com/entreprise-coaching-professionnel 
Password = inesse.
This is the third section.

Any feedback would be appreciated ! 🙏🙏

Thank you !
Laura

Which section are you referring to? Or you mean section with left text right image under ME CONTACTER button?