Sticky element according with parent + element with regular scroll

[EdwinSana]

Hello. Please, I would like your help with a simple question:

 

I have a series of boxes ("container"), inside of them there is a sticky element ("element_sticky") and a big block of text ("element_nosticky") which should move normally, I mean not sticky.

 

I'm stuck trying to make "element_sticky" sticky relative to its parent's height. It didn't work and I had to use an oversize value at the end: end: "top +=60000", this so that "element_sticky" would at least not break its sticky behavior before it overtake its parent ("container"). What I am looking for? That when the bottom of "element_sticky" touches the bottom of its parent ("container"), it starts going up with it, i.e. it ends its behavior as sticky.

 

Thanks for the help!

See the Pen RwJWozp by EdwinSanabria (@EdwinSanabria) on CodePen

[Cassie]

Heya! Sure thing,

 

So you'll have to calculate the distance. You can do this using offsetHeight for each of your elements

See the Pen poKjRMJ?editors=1111 by GreenSock (@GreenSock) on CodePen

I removed the margin top to avoid confusion, but feel free to add it back in, you'll just need to adjust the calculation to include that 100px distance too.

[EdwinSana]

Hi @Cassie

 

Perfect, that's the solution that I'm looking for. Thank you!

[EdwinSana]

Hi @Cassie

 

Thank you very much again for the solution, which has partially worked for me, but sorry, I have a problem and would like to ask for your help again please:

 

The purpose of "element_sticky" is to be an element that text of different lengths, both short titles as well as very long blocks of text, can be regularly scrolled over. This implies that the sticky effect must be able to adjust to the different height values that the container has, either a fixed value such as "height: 350vh;", or it must be able to make the sticky effect if what is inside "container" it's a very long text.

In summary, the ideal is that the sticky effect is adjusted strictly to the height of its parent "container" and not to that of its sibling, which in this case is "element_nosticky".

 

I leave the following codepen to better illustrate my point, in which I have left "element_sticky" with position:absolute so that it is located under "element_nosticky"

 

See the Pen xxzwPVw by EdwinSanabria (@EdwinSanabria) on CodePen

 

Thanks again for all your help.

 

[EdwinSana]

... Or anyone who can please offer any hints or help regarding this question would be greatly appreciated. Thanks.

[GreenSock]

I'm not sure I understand your goal correctly, but if you want to base it on the container, then use that in your calculations instead of the .element_nosticky. Also, since you're not animating anything, you can just use the standard ScrollTrigger.create(...) instead of gsap.to(...)

See the Pen XWYmYXY?editors=1010 by GreenSock (@GreenSock) on CodePen

[EdwinSana]

Hi!

 

This answer, along with the one @Cassie offered, is that I'm looking for.

 

Thank you very much again to both of you for the help.