JSFiddle - React, Tailwind, and code Playground

by joepenzo

HTML

<script type="text/javascript"  src="http://download.remysharp.com/jquery.inview.js"></script>
<div class="scrollWatch">1</div>
<div>1</div>
<div class="scrollWatch">1</div>
<div>1</div>
<div class="scrollWatch">1</div>
<div>1</div>
<div class="scrollWatch">1</div>
<div>1</div>
<div class="scrollWatch">1</div>
<div>1</div>
<div class="scrollWatch">1</div>
<div>1</div>
<div class="scrollWatch">1</div>
<div>1</div>
<div class="scrollWatch">1</div>
<div>1</div>
<div class="scrollWatch">1</div>
<div>1</div>
<div class="scrollWatch">1</div>

CSS

.scrolled {
    background: steelblue;
}

div {
    height: 300px;
    margin: 100px 0;
}

JavaScript

$('.scrollWatch').bind('inview', function (event, visible) {
    if (visible) {
        // do something here
        $(this).addClass('scrolled');
        $(this).text('mom! I\'m here.');
    } else {
        // do something here with invisible
        $(this).removeClass('scrolled');
        $(this).text('1');
    }
});