Pin element to the bottom of another element

[fionchadd]

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

Thanks! 

Hannah

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

[Shaun Gorneau]

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!

 

Shaun

[fionchadd]

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! 

Hannah

[GreenSock]

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.