Pin Section effect without scripts

How to import code

If link is going to Gist.Github, then visit it, click on Raw button and copy code

Then, simply paste it in your editor. In some cases, if you see code instead of blocks, you need to switch to code view (top right 3dots and select to use code view), paste code in code view and switch back to visual view.

If link is going to library, then you can import and find this element in Experimental/Fancy section of library

01. Request Project

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel justo ante. Nulla ullamcorper vehicula ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel justo ante. Nulla ullamcorper vehicula ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel justo ante. Nulla ullamcorper vehicula ipsum.

02. Design project

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel justo ante. Nulla ullamcorper vehicula ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel justo ante. Nulla ullamcorper vehicula ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel justo ante. Nulla ullamcorper vehicula ipsum.

03. Estimate project

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel justo ante. Nulla ullamcorper vehicula ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel justo ante. Nulla ullamcorper vehicula ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel justo ante. Nulla ullamcorper vehicula ipsum.

04. Order project

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel justo ante. Nulla ullamcorper vehicula ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel justo ante. Nulla ullamcorper vehicula ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel justo ante. Nulla ullamcorper vehicula ipsum.

05. Enjoy project

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel justo ante. Nulla ullamcorper vehicula ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel justo ante. Nulla ullamcorper vehicula ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel justo ante. Nulla ullamcorper vehicula ipsum.

Technically, it’s very simple effect. You just need to set parent container with some static height. Add Position Relative in Advanced – Position.

Now, add child element. It can be anything. Images, other containers, etc. Now, set Position sticky in Advanced – Position and set top value. And that’s all. How long element will be sticked depends on height of parent container. More height – longer it will be sticked.

In this example, i also set a bit more higher Top option for each of next section. In this way, each next sticked element will be a bit lower and you see such section stack.

Don’t forget to add different height for mobile version because this will require more height