将元素固定在顶部的特定偏移处，然后在滚动1000px后释放

Question

I'm trying to do something that I think has to do with parallax or sticky libraries but having a bunch of trouble.

I'd like to let the user scroll normally, and then when a particular div is a particular value (lets say 232px) from the top of the screen, I want to hold the element in place (ie give it position:fixed). This part is easy to get the offset:

$('element')product1[0].getBoundingClientRect().top;

Then, let the user continue to scroll with the element in place so they can see the background continue to move with the scroll (I have a large height background with a nice linear-gradient).

Then after the user scrolled for about 1000px I want to release the element and let it continue to move up with the scroll. The same should happen when the user scrolls back up - it holds for a bit then releases.

I've tried a bunch of different things and combinations of libraries, pure css, JS, etc. Nothing works well. Everything has an issue. Would love to see a clean solution.

Things I've tried: -JQuery sticky libraries (could not find one that does or is customizable to what I need) -Vanilla JS tracking position (had jumping issues on release - element would fly far away on release, not continue from release position) -CSS, specifically translateZ

The ideal setup is:

<div style="height: 230vh; background: linear-gradient(coolOne)">
   <div class="containerToStickTemporarily">
      <p class="textOnLeft">Hi</p>
      <img src="myImage.png"/>
   </div>
</div>

And I'd like to have multiple of these in a row.

Answer 1

Something like that.. I guess

$(window).scroll(function(){
     var top = $(window).scrollTop();

     $('element').css({ position: top > 230 && top < 1000 ? 'fixed' : 'relative' });
})