Bottom Offset in Sticky Scroll

Ask the community
1

You can see two sections in the page: https://www.empyreanstudio.com/blank-1

So, the first section is what I want to show to visitors. It is simple layout taken from design section. The second section is what I want to make. All the elements in first section but with sticky scroll. So it reveals all one by one. The text, the phone image, two textboxes on side, background mountain image and other two text boxes on side in Chronology.

1888×668 190 KB

I was able to achieve with setting top offset for each element and setting scroll option as sticky. The problem I faced was, before the scroll was over, all the elements touched bottom and overlapped. Now this is expected because of the way it works. So, I have put some elements inside big containers and set them such that they don’t overlap in bottom. You can see results in second section on the link shared above. It kinda works but result is not perfect. Also, for tablet and mobile this setting would be bad.

So, I want to ask if there is other way around it. Any ideas or method on how to achieve sticky scroll reveal first and then simple scroll without overlap or glitches. Help your brother out!

2

Hey @dev-vora , to prevent the sticky elements from sticking to the bottom of their section/container, you should apply bottom margin to those elements.
This will behave as “invisible content” and it will prevent them from touching the bottom.

3

That worked! Thank you for swift reply. You can check the results now on same link