JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div class="frame">
    <div class="target"></div>
</div>
<div class="frame">
    <div class="target"></div>
</div>
<div class="frame">
    <div class="target"></div>
</div>
<div class="frame">
    <div class="target"></div>
</div>
<div class="frame">
    <div class="target"></div>
</div>
<div class="frame">
    <div class="target"></div>
</div>
<div class="frame">
    <div class="target"></div>
</div>
<div class="frame">
    <div class="target"></div>
</div>

CSS

.frame{
    width:500px;
    border-bottom:1px solid #000;
    height:300px;
    width:100%;
    }
.target{
    background:blue;
    width:80px;
    height:100px;
    margin:10px auto;
    }

JavaScript

var stickr = (function(){
    var opts = {
        relativeTo: 'body',
        target: '.target',
        threshold: '.frame'   
    };

    function listen(){
        console.log('listening'); 
        $(document).on('scroll', function(){
            console.log('scroll');            
        });
    }

    return {
        init: listen      
    };
})();

stickr.init();