Jump to content


Pin element to the bottom of another element

Go to solution Solved by Shaun Gorneau,

Recommended Posts

Hi there, 


I'm building a page at the moment which has sections with headers inside them, and I'd like to pin each header to the bottom of the previous header when the user scrolls down, with each header acting as a hotlink back to that section. 


I've been able to make this work by writing a different scroll-trigger for each section and manually changing the start point to accommodate the previous header, here: 

See the Pen zYPPjwK by fionchadd (@fionchadd) on CodePen

  - so this is the end effect I'm after. 


But I'm thinking there's probably a 'better' way to write this so I'm not dependent on writing different triggers and changing the offset each time? Is there a way to say, for the trigger start point, "please find the position of the previous header and pin this item when it reaches the bottom of that header"? 


No worries if there isn't! (or if this is beyond the scope of your support) I just thought I'd ask :)



See the Pen KKyyoae by fionchadd (@fionchadd) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @fionchadd,


I don't see anything wrong with multiple triggers so long as, like your second example, you can wrap it in a loop to build it out for you. Your second example is very close, the only thing was you were not adding the necessary pixel offsets to the `start:` as you did in your first example. This should do it (plus it's a bit simplified).


See the Pen WNXXKVY?editors=0010 by sgorneau (@sgorneau) on CodePen


Hope this helps!



  • Like 4
Link to comment
Share on other sites

Hi Shaun, 


That's perfect, thanks so much! I was falling down on how to write the "top top+=" + (59*i) formula, this is a huge help :-)


Thanks again! 


Link to comment
Share on other sites

2 hours ago, fionchadd said:

I was falling down on how to write the "top top+=" + (59*i) formula, this is a huge help

Just to be clear...

// this...
start: "top top+=" + (59*i)

// is the same as this...
"top " + (59*i)

Because pixel dimensions are always measured from the top anyway. 

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.