JSFiddle - React, Tailwind, and code Playground

by mackry

HTML

<div id="page"> 
    
    <div style="height: 300px"> 
        <div id="schedule"><h1>Schedule</h1></div> 
    </div> 
    <ul> 
        <li id="professor"><h3>Professor</h3></li> 
        <li id="professor"><h3>Professor</h3></li> 
        <li id="professor"><h3>Professor</h3></li> 
        <li id="professor"><h3>Professor</h3></li> 
        <li id="professor"><h3>Professor</h3></li> 
        <li id="professor"><h3>Professor</h3></li> 
        <li id="professor"><h3>Professor</h3></li> 
        <li id="professor"><h3>Professor</h3></li> 
    </ul> 
    
</div>

CSS

body {
    height: 100%;
    background: #a5d5f6;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#page {
    height: 100%;
    width: 750px;
    background: #a5d5f6;
    padding-top: 50px;
    margin: 0 auto;
}

#schedule {
    background: #ddd;
    border: 1px dashed #bbb;
    margin: 0 auto;
    width: 750px;
    height: 300px;
    font-size: 20px;
    font-family: helvetica;
    z-index: 100%;
}

#schedule.fix {
    position: fixed;
    top: 0;
}

#professor {
    background: #f5f5f5;
    border: 1px solid #888;
    border-top: none;
    margin: 0 auto;
    width: 750px;
    height: 150px;
    font-size: 15px;
    font-family: helvetica;
    text-indent: 15px;
    padding-top: 15px;
}

#professor.sub {
    height: 50px;
    position: fixed;
}

JavaScript

$(document).ready(function() {
        var schedule = $('#schedule'),
            schedulePos = $('#schedule').offset(),
            page = $('#page'),
            index = 0,
            prevScroll = $(document).scrollTop(),
            margin = schedulePos.top;
    
    
        $(window).scroll(function()
        {
            var newScroll = $(document).scrollTop(),
                prof = $('li#professor').eq(index);
    
            //schedule.html($(document).scrollTop() + '  ' + $(window).scrollTop() + '<br/>Prof #1: ' + prof.offset().top + '<br/>index: ' + index);
    
            if ($(this).scrollTop() >= schedulePos.top && !schedule.hasClass('fix') && newScroll > prevScroll) {
                schedule.addClass('fix');

            }
            else if ($(this).scrollTop() < schedulePos.top) {
                schedule.removeClass('fix');

            }
            
            if ($(window).scrollTop() >= ((100 * (index+1)) + margin) && newScroll > prevScroll) {
                //alert(index);
                prof.css({
                    position: 'fixed',
                    height: '50px',
                    top: (schedule.height() + (index * 50)) + 'px'
                });
                index++;
            }
            else if ($(window).scrollTop() <= ((100 * (index+1)) + margin) && newScroll < prevScroll) {
                prof.css({
                    position: 'static',
                    height: '150px'
                });
                index--;    
            }
            
            prevScroll = newScroll;
        });
    });