JSFiddle - React, Tailwind, and code Playground

HTML

<section class="parallax">
    <div class="parallax-item">
        any text
    </div>
    <div class="parallax-img-container" id="img1" style="background: url('https://upload.wikimedia.org/wikipedia/commons/3/3e/Example_of_night_photography_at_The_Garden_of_Five_Senses,_New_Delhi.JPG') 0px 0px; background-size: cover; border: 1px solid #000;"></div>
    <div class="parallax-item">
        any other text
    </div>
</section>

JavaScript

$(function() {
    // set up the items height to the screen height
    var height = $(window).height();
    $('.parallax-item').height(height).css({'background':'#fff'});
    $('.parallax-img-container').height(height);
    // catch scroll event
    $(window).scroll(function() {
         if ( isScrolledIntoView('#img1') ) {
             $('#img1').css({'background-position':'0px '+parseInt( $(window).scrollTop() )+'px'});
         }
    });
});
function isScrolledIntoView(elem) {
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    //return ((elemBottom > docViewBottom) || (elemTop < docViewTop));
    return (((elemTop <= docViewBottom) && (elemBottom >= docViewBottom)) || ((elemTop < docViewTop) && (elemBottom >= docViewTop) ));
}