JSFiddle - React, Tailwind, and code Playground

by Bastien Leprince

HTML

<body>
    <div class="holder">
    
        <div class="main">
            <div style='height:200px;' class='post'>
                <p class="description" style="display: none;">content one description</p>
                Website Other Stuff
                <br/>Other Stuff
            </div>
            <div style='height:250px;' class='post'>
                <p class="description" style="display: none;">content two description</p>
                Packaging
            </div>
            <div style='height:350px;' class='post'>
                <p class="description" style="display: none;">content three description</p>
                Mobile Website
            </div>
            <div style='height:200px;' class='post'>
                <p class="description" style="display: none;">content four description</p>
                Proposal Book
            </div>
            <div class="panel">
              <div id='date'></div>
            </div>
            <div style='height:800px;'></div>
        </div>
    </div>
</body>

CSS

body {
	margin: 0px;
	padding: 25px;
	font-family: helvetica, arial;
	font-size: 9pt;
}

.holder {
	width: 100%;
} 

.main {
	padding-left: 225px;
	width: 640px;
	font-family: helvetica, arial;
	font-size: 9pt;
	float: left;
} 

.info {
	width: 180px;
	font-family: helvetica, arial;
	font-size: 9pt;
	float: left;
	margin-left: 885px;
	position: fixed;
} 

p.content {
	width: 180px;
	border-top: 1px solid #CCCCCC;
	padding-bottom: 5px;
	padding-top: 5px;
	margin: 0px;
}

.post {
	border: 1px dashed grey;
	margin-right: 50px;
	margin-bottom: 20px;
}
.panel{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position:fixed;
    top:0;
	left:25px;
  	width: 90px;
}
#date {
  color:#000;
  padding:2px;
  -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:         all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
}

#date.down{
  animation: down 1000ms forwards;
}

@keyframes down {
  0% {
    margin-top: 25px;
    opacity: 1;
  }
  33%{
   margin-top: 50px;
    opacity: 0; 
  }
  66% {
    margin-top: 0px;
    opacity: 0;
  }
  100%{
       margin-top: 25px;
    opacity: 1; 
  }
}

#date.up{
  margin-top: -10px;
   animation: up 1000ms forwards;
}

@keyframes up {
  0% {
    margin-top: 25px;
    opacity: 1;
  }
  33%{
   margin-top: 0;
    opacity: 0; 
  }
  66% {
    margin-top: 50px;
    opacity: 0;
  }
  100%{
    margin-top: 25px;
    opacity: 1; 
  }
}

.Desc {
	width: 200px;
	font-family: helvetica, arial;
	font-size: 9pt;
	float: left;
	position: fixed;
	background: grey;
}

JavaScript

$(window).load(function () {
var lastScrollTop = 0;
    $(window).on("scroll resize", function () {
        var st = $(window).scrollTop();
        $('.post').each(function () {
            if (st >= $(this).offset().top && st <= $(this).next().offset().top) { 
            	var el = $( "#date" );
            	var newDescr = $(this).find('.description').text();
              var oldDescr = $( "#date" ).html();
              $('#date').html(newDescr);
              if(newDescr !== oldDescr) {
                if (st > lastScrollTop){
              		el.removeClass("up down").before( el.clone(true) ).remove();
              		$("#date").addClass("down");
            		} else {
              		el.removeClass("up down").before( el.clone(true) ).remove();
              		$("#date").addClass("up");
            		}
            		lastScrollTop = st;
              }
            }
        });
    });

    $(document).ready(function () {
        $(window).trigger('scroll'); // init the value
    });
});