JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<div id="head">
    <div id="info">
        <ul>
            <li><img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/001.jpg" width="48px" height="48px"/></li>
        </ul>
    </div>
</div>
<div id="content">
    <div id="img-list">
        <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/001.jpg"/>
        <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/002.jpg"/>
        <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/003.jpg"/>
        <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/004.jpg"/>
    </div>
</div>

CSS

#head {
    width: 750px;
    height: 100px;
    position:fixed;
    z-index: 9999;
    background: #000
}
#content {
    padding-top: 105px;
}
#info{ color: white; }
#info ul li:hover{ cursor: pointer; }

JavaScript

$(function(){
    $('#img-list').css('height', $('#img-list').height() + 500);
    var last = 0,
        i = 0;
    $(document).scroll(function() {
        
        var head = $('#head'),
            top = head.offset().top,
            down = (top>last) ? true : false;
        
        //alert(top+">"+i+"*(500+100)");
        if(down)
        {
            
            if(top>((i+1)*(300))+ (100*i)) {
                head.find('ul li img').stop().slide(++i, "up", "down", 500);
            }        
            
        } else {
            
            if(top<((i+1)*(280))) {
                head.find('ul li img').stop().slide(--i, "up", "down", 500);
            }     
            
        }   
        last = top;        
        
    });
            
    $.fn.slide = function(eq, d1, d2, speed) {
        
        this
            .hide("slide", { direction: d1}, speed)
            .attr('src', $('#img-list img:eq('+eq+')').attr('src'))
            .show("slide", { direction: d2}, speed);
        
    }
})