JSFiddle - React, Tailwind, and code Playground

by Fahd Murtaza

HTML

<script src="http://benalman.com/code/projects/jquery-throttle-debounce/jquery.ba-throttle-debounce.js"></script>
<span id="scrollMsg">NOT YET!</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean velit lorem, pharetra vitae imperdiet non, porta a ipsum. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc magna magna, pulvinar vel venenatis nec, bibendum ac ante. Curabitur purus ligula, dignissim quis tempor sit amet, posuere vel lorem. Aenean mi risus, pretium et luctus at, rhoncus sed velit. Suspendisse lorem tellus, tempus vitae placerat eu, ornare vitae libero. Nulla orci enim, iaculis vitae interdum at, convallis id magna. Sed eu erat erat. Ut elementum condimentum libero in luctus. Fusce nec faucibus arcu. Vestibulum lacinia ultrices massa, commodo viverra risus volutpat at. Aenean commodo purus nec ligula gravida ornare. Mauris metus nunc, dapibus non consequat at, accumsan a libero. Praesent dolor mauris, rhoncus nec placerat sed, aliquet vitae urna.</p>

<p>Duis a turpis nibh. Sed tristique, augue id eleifend mollis, arcu mauris tincidunt enim, vitae sagittis felis nisi vitae ligula. Praesent ante neque, congue quis sollicitudin eu, luctus vitae eros. Aenean eget tellus vel mi lobortis ullamcorper. Aliquam blandit enim ac elit ornare posuere. Nulla tempus justo eget sem porta elementum. Vestibulum at lacus ac est aliquet semper nec rutrum mauris. Sed laoreet vulputate mauris, blandit molestie odio tincidunt eu. Vivamus quis leo mi. Donec risus nisi, consequat a accumsan nec, adipiscing in eros. Praesent ipsum sapien, euismod ac consectetur laoreet, congue sit amet sapien. Fusce et dolor in neque varius convallis ac a risus. Nunc eu orci est, dignissim euismod magna. Proin sodales metus vitae dui pulvinar posuere. Mauris ac malesuada nisl. In at arcu et erat vestibulum facilisis at sed quam.</p>

<p>Ut fermentum lectus vitae neque ultrices lobortis nec vel...

CSS

#scrollMsg{
 position:fixed;
 color: red;
 font-size: 20px; 
    background: white;
    padding:20px;
}

JavaScript

$(window).scroll($.debounce( 250, true, function(){
    $('#scrollMsg').html('SCROLLING!');
} ) );
$(window).scroll($.debounce( 250, function(){
    $('#scrollMsg').html('DONE!');
} ) );