JSFiddle - React, Tailwind, and code Playground

by maximua

HTML

<blockquote style="overflow: hidden; margin: 1em 0px; padding: 0px 40px; color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">
	<p style="margin: 0.5em 0px; line-height: inherit;"><i>Lorem ipsum dolor sit 
	amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
	labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
	exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis 
	aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
	fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt 
	in culpa qui officia deserunt mollit anim id est laborum.</i></p>
</blockquote>

<audio controls class="box follow-scroll">
<source src="http://techslides.com/demos/samples/sample.ogg" type="audio/ogg">
<source src="http://techslides.com/demos/samples/sample.mp3" type="audio/mpeg">
</audio>

<blockquote style="overflow: hidden; margin: 1em 0px; padding: 0px 40px; color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">
	<p style="margin: 0.5em 0px; line-height: inherit;"><i>Lorem ipsum dolor sit 
	amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
	labore et dolore magna aliqua. Ut enim ad minim veniam,...

JavaScript

(function($) {
    var element = $('.follow-scroll'),
        originalY = element.offset().top;
    
    // Space between element and top of screen (when scrolling)
    var topMargin = 20;
    
    // Should probably be set in CSS; but here just for emphasis
    element.css('position', 'relative');
    
    $(window).on('scroll', function(event) {
        var scrollTop = $(window).scrollTop();
        
        element.stop(false, false).animate({
            top: scrollTop < originalY
                    ? 0
                    : scrollTop - originalY + topMargin
        }, 300);
    });
})(jQuery);