Jump to content
Search Community

End pinned element when next div comes into viewport

pixelarchitect test
Moderator Tag

Go to solution Solved by pixelarchitect,

Recommended Posts

  • Solution

I made a div with text that gets pinned at the bottom (left is shorter than right). This is good but I want the bottom of the text to be pinned until the next section comes into the viewport, currently it just randomly starts scrolling while the next div didn't enter the viewport yet. Somebody knows a solution or can help me in the right direction?

 

See the Pen yLXXOrZ by pixelarchitect (@pixelarchitect) on CodePen

Link to comment
Share on other sites

 

Hey there @pixelarchitect

 

You could define an endTrigger alongside the end property for something like that.

 

In this following example the endTrigger is set to the last one of your images (which I added a class of "last-img" to) with the end set to bottom bottom. So the pinning will now stop when the bottom of that last image hits the bottom of the viewport. Does that work like what you had in mind?

 

See the Pen 50e7ca641099eb5553d57ede890e13ec by akapowl (@akapowl) on CodePen

 

  • Like 3
Link to comment
Share on other sites

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...