gsap sticky

[Yuliya92]

tell me how to correctly fix an element when scrolling, so that it is glued to the top of the browser window and goes to the end of the product block

See the Pen dywrMzp by 150 (@150) on CodePen

[mvaneijgen]

Your end trigger was already done before it started, so nothing would happen. You can see this with the markers if the green once touch they start and if the red once touch it ends. 

 

I've changed some of your logic around. Instead of using the .balon element as the trigger I use the .product element, then we don't need to do weird calculations (-142px) on that and can just start at the top. My advice would be use the named trigger eg top and bottom or use % based values, but don't mix them (0% = top 100% = bottom).

 

Then instead of setting pin: true, you can set pin to the element you want to pin, in this case .balon, then the only thing we need to calculate is when .balon needs to stop pinning. We know we want the bottom of .balon to touch the bottom of the element, so we need the height of it and .balon is offset a bit from .product, so we need to know that distance (that is your -142px, but better to calculate that, so it is responsive). So that is what we do in the end trigger. 

 

Hope it helps and happy tweening! 

 

See the Pen OJrqXaK?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen