JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<div id="shell">
    <div id="alertList">
            <div data-endtime="00:00" data-starttime="13:28" data-desc="Something weird went on" id="alert_0" class="alert">
                <i class="icon-chevron-right arrow"></i>
                    <span class="date">22 Nov, 2012</span>

                <span class="time">13:28</span>
                Something weird went on
                
            </div>
            <div data-endtime="00:00" data-starttime="10:28" data-desc="Another thing happened here" id="alert_0" class="alert">
                <i class="icon-chevron-right arrow"></i>

                <span class="time">10:28</span>
                Another thing happened here
                
            </div>
            <div data-endtime="00:00" data-starttime="10:28" data-desc="Another thing happened here" id="alert_0" class="alert">
                <i class="icon-chevron-right arrow"></i>

                <span class="time">10:28</span>
                Another thing happened here
                
            </div>
            <div data-endtime="00:00" data-starttime="10:28" data-desc="Another thing happened here" id="alert_0" class="alert">
                <i class="icon-chevron-right arrow"></i>

                <span class="time">10:28</span>
                Another thing happened here
                
            </div>
            <div data-endtime="00:00" data-starttime="10:28" data-desc="Another thing happened here" id="alert_0" class="alert">
                <i class="icon-chevron-right arrow"></i>

                <span class="time">10:28</span>
                Another thing happened here
                
            </div>
            <div data-endtime="00:00" data-starttime="10:28" data-desc="Another thing happened here" id="alert_0" class="alert">
                <i class="icon-chevron-right arrow"></i>

                <span class="time">10:28</span>
                Another thing happened here
                
            </div>
           ...

CSS

#shell
    {
        width: 100%;
        height: 360px;
        
        /*background-color: #fefefe;*/
        overflow: scroll;
        overflow-x:hidden;
        position:relative;
    }

    #alertList
    {
        margin-left: 100px;

        display: inline;
        float: left;
        height: 100%;

        position: relative;
        width:350px;
    }

    #alertList .alert
    {
        padding: 10px;
        border-bottom: 1px solid #eee;
        cursor:pointer;
    }

    #alertList .date
    {
        padding-top: 10px;
        margin-top: -10px;
        position: absolute;
        left: -110px;
        width: 100px;
        text-align: right;
        color: #aaa;
        font-size: 14px;
        /*border-top: 1px solid #eee;*/
    }

    #alertList .time
    {
        /*padding: 0 0 10px 0;
        position: absolute;
        left: -50px;*/
        display: inline;
        float: left;
        margin-right: 15px;
        margin-bottom: 10px;

        color: #888;
        /*border-bottom: 1px solid #eee;*/
    }

JavaScript

var currentElemIndex = 0;
var currentElem = $('#alertList .date:eq(' + currentElemIndex + ')');
var currentElemMarginTop = parseInt(currentElem.css('margin-top'));
var currentElemHeight = currentElem.outerHeight();
var currentElemPosTop = currentElem.position().top;
var nextElem = $('#alertList .date:eq(' + currentElemIndex+1 + ')');
$('#shell').scroll(function (ev) {
    var scrollTop = $('#shell').scrollTop();
    if (scrollTop >= nextElem.position().top - currentElemHeight) {
        currentElemIndex++;
        currentElem.css('margin-top', currentElemMarginTop + 'px');
        currentElem = nextElem;
        currentElemMarginTop = parseInt(currentElem.css('margin-top'));
        currentElemHeight = currentElem.outerHeight();
        currentElemPosTop = currentElem.position().top;
        nextElem = $('#alertList .date:eq(' + currentElemIndex + ')');
    }
    if (scrollTop  > currentElem.position().top) {
        currentElem.css('margin-top', $('#shell').scrollTop() - currentElem.position().top + 'px');
    }
    if (scrollTop < currentElemPosTop) {
        nextElem = currentElem;
        currentElemIndex--;
        currentElem = $('#alertList .date:eq(' + currentElemIndex + ')');
    }
});