JSFiddle - React, Tailwind, and code Playground

by surakrai

HTML

<link rel="stylesheet" href="http://gstartwo.com/test/nanoscroller.css">
<script src="http://gstartwo.com/test/jquery.nanoscroller.min.js"></script>
<div class="column nano">
    <div class="content"> 
        <div id="first">First </div>
        <div id="second">Second</div>
        <div id="third">Third</div>
        <div id="fourth">Fourth</div>
        <div id="fourth">Fifth</div>
    </div> 
</div>

CSS

.column{
	width: 400px;
	height: 200px;
}
.content > div{
	height: 100px;
    line-height: 100px;
	background: #e8e8e8;
    padding-left:20px;
}
.content > div:last-child{
    margin-bottom: 100px;
    
}
.content > div.current{
    background: #fb887c;  
    color: #fff;
}

JavaScript

$(".nano").nanoScroller();

$('.content').bind('scroll', function() {
    $('.content > div').each(function() {
        var list = $(this);
        var position = list.position().top - $(window).scrollTop();
        if (position == 0) {
            list.addClass('current');
            alert(list.text());
        } else {
            list.removeClass('current');
        }
    });        
});