JSFiddle - React, Tailwind, and code Playground

by Chris

HTML

<div class="grey">
</div>

<div class="white testi">
    <div class="testimonial"> Read some text here </div>
</div>

<div class="black">
</div>

CSS

.grey {
    background: grey;
    width: 100%;
    height: 1000px;
}

.white {  
    width: 100%;
}

.black {
    background: black;
    width: 100%;
    height: 1000px;
}

.testi {
    height: 0px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    background-color: white;
    z-index: 4;
}
.testishow {
    height: 330px;
}

.testimonial {
    display: none;
}

JavaScript

function lockScroll(){
    $html = $('html');
    $body = $('body');
    var initWidth = $body.outerWidth();
    var initHeight = $body.outerHeight();

    var scrollPosition = [
        self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
        self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
    ];
    $html.data('scroll-position', scrollPosition);
    $html.data('previous-overflow', $html.css('overflow'));
    $html.css('overflow', 'hidden');
    window.scrollTo(scrollPosition[0], scrollPosition[1]);

    var marginR = $body.outerWidth()-initWidth;
    var marginB = $body.outerHeight()-initHeight;
    $body.css({'margin-right': marginR,'margin-bottom': marginB});
}

function unlockScroll(){
    $html = $('html');
    $body = $('body');
    $html.css('overflow', $html.data('previous-overflow'));
    var scrollPosition = $html.data('scroll-position');
    window.scrollTo(scrollPosition[0], scrollPosition[1]);

    $body.css({'margin-right': 0, 'margin-bottom': 0});
}


jQuery(document).ready(function(){
    $(window).scroll(function(){
        var p = $( ".testi" );
        var offset = p.offset();
        if ($(this).scrollTop() > offset.top - $(window).height()/2 && !p.hasClass("scrollLocked")) {
            lockScroll();
            p.addClass("scrollLocked");
            $('.testi').addClass( 'testishow' );
            setTimeout(function(){
                $('.testimonial').fadeIn('fast', function(){
                    unlockScroll();
                });
            },700);
        }
    })
});