Jump to content
Search Community

How to pin a section from the start?

Asored
Moderator Tag

Recommended Posts

Posted

I'm currently stuck on something that sounds pretty simple in theory. However, I'm still having problems implementing it.

 

In the codepen you can see the section "BOTTOM (PIN)". It currently pins as soon as it reaches the viewport. But I want the opposite behavior.

 

How can I get the section .bottom to be pinned from the start (fixed at the bottom of the page) and, as soon as it reaches its original position, simply move up again?

I've tried playing with "start" and "end", but I can't get anywhere near the result that the section is pinned from the start.

 

Do you have any ideas? :-)

See the Pen xxNOWgZ by asored (@asored) on CodePen.

mvaneijgen
Posted

I had to restructure your HTML and CSS a bit to get things to play nice with each other. I've added a .trigger element to use as the trigger and an .endTrigger element to use as the end trigger, this element is at the same position as the .bottom element and has the same height. 

 

I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! 

 

See the Pen VwOjxzG?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen.

  • Like 1

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...