title: Sticky/fixed on scroll until parent container end - CSS/JS
body: <p>I am trying to get something like this working - <a href="https://www.acnestudios.com/nl/en/avalon-double/12F163-1G2.html?categid=woman-coats-jackets" rel="nofollow noreferrer">https://www.acnestudios.com/nl/en/avalon-double/12F163-1G2.html?categid=woman-coats-jackets</a>.</p>
  
  <p>The idea is to have the product description sticky, until the end of the image/images are scrolled and then stay in that container, at the bottom until scrolled up again and then become sticky again.</p>
  
  <p><code>position: sticky;</code> would be nice, IF it was supported by browsers, but it's not :(</p>
  
  <p>Find a jsfiddle attached: <a href="https://jsfiddle.net/pn7Lzgs1/" rel="nofollow noreferrer">https://jsfiddle.net/pn7Lzgs1/</a></p>
  
  <p>I am guessing it's going to be some sort of an onscroll <code>addEventListener</code></p>
  
  <p>Thank you!</p>