JSFiddle - React, Tailwind, and code Playground

HTML

<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet turpis sed odio convallis laoreet. Vivamus erat nunc, aliquam non posuere mollis, aliquam at neque. Suspendisse ac urna ac libero ultrices dictum. Cras ornare adipiscing suscipit. Mauris sollicitudin interdum justo vitae scelerisque. Etiam non diam diam, quis imperdiet orci. Vestibulum sit amet velit lectus. Mauris consectetur sagittis mauris, quis pretium massa scelerisque et. Duis diam orci, convallis at luctus eu, vehicula vel erat.
</p>
<p>
Integer tellus ligula, pharetra eu accumsan non, posuere quis nunc. Suspendisse commodo felis pharetra sapien egestas quis ultricies lorem convallis. Vivamus semper lacinia nisl at malesuada. Maecenas ultricies massa a tellus fermentum imperdiet. Morbi aliquam lorem sit amet orci fringilla vestibulum varius velit gravida. Nullam tincidunt enim nec felis gravida sit amet faucibus augue varius. Suspendisse vitae sem at magna pharetra pulvinar. Fusce ac nisl nulla. Sed eget nulla ac tortor aliquam imperdiet.
</p>
<p>
Vestibulum sodales accumsan lorem eu auctor. In vitae nulla ante. In sit amet diam metus, eget bibendum ipsum. Ut vulputate odio id mi auctor egestas. Praesent mattis, purus in consequat pellentesque, lorem libero pretium magna, non venenatis magna lectus et augue. Proin dolor lacus, sagittis sed interdum at, vulputate vitae quam. Aliquam vel elit neque. Aliquam rutrum nulla at massa luctus pretium. Nullam a est nec neque porttitor feugiat sed eu sapien. Sed massa risus, cursus et fermentum id, consectetur non velit. Praesent nulla velit, venenatis in laoreet at, fermentum sed quam. Cras venenatis mi nec nisl sagittis ut bibendum tellus pharetra. Morbi et nulla ut felis viverra volutpat. Sed at arcu sem.
</p>
<p>
Praesent velit orci, dapibus in ultricies eget, scelerisque id diam. Nulla tempus pharetra turpis non accumsan. Aliquam erat volutpat. Cras dignissim odio sit amet felis fringilla eget pulvinar turpis...

CSS

#bg_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    z-index: -1;
}
#bg_img.fixed {
    position: fixed;
    bottom: 0;
    top: auto;
}
#lipsum p {
    color: #fff;
    padding: 10px 0;
}

JavaScript

var imgScroll = false;
window.onscroll = function() {
    if ($(window).scrollTop() > $('#bg_img').height()-window.innerHeight)
    {
        $('#bg_img').addClass('fixed');
    }
    else
    {
        $('#bg_img').removeClass('fixed');
    }
  }