JSFiddle - React, Tailwind, and code Playground

by Mohammed Ismail Ansari

HTML

<div id="page">
<div id="content2">
<div id="menu">
<ul>
    <a class="mtext" href="#"><li class="h5">OPTION1</li></a>
<a class="mtext" href="#"><li class="h1">OPTION2</li></a>
<a class="mtext" href="#"><li class="h2">OPTION3</li></a>
<a class="mtext" href="#"><li class="h3">OPTION4</li></a>
<a class="mtext" href="#"><li class="h4">OPTION5</li></a>
<a class="mtext" href="#"><li class="h6">OPTION6</li></a>
<a class="mtext" href="#"><li class="h7">OPTION7</li></a>
<li class="h8">OPTION7</li>
</ul>
</div>
<div id="bg">
</div>
</div>
</div>

CSS

#page{
width:980px;
margin-top:10px;
margin-left:auto;
margin-right:auto;
}

#content{
    height:600px;
	position:relative;
	margin-left:auto;
	margin-right:auto;
}

#bg{
width:990 px;
height:1200px;
margin-top:16px;
background-color:#0066CC;
}

#menu{
font-family: 'custom';
	width:200px;
    top: 0px;
	text-align:center;
	position:absolute;
	text-decoration:none;
	border: 1px solid #0033FF;
	box-shadow: 5px 5px 5px #666666;
	background-color:#FFFFFF;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    transition: 1s;
}

#menu.bottom
{
    top: 567px;
}

JavaScript

$(document).ready(function(){
    var animationStarted = false;
    
      $(window).scroll(function(){
        if($(window).scrollTop() > 480 && !animationStarted){
             $("#menu").addClass("bottom");
            animationStarted  = true;
        };
        if($(window).scrollTop() < 480 && animationStarted){
             $("#menu").removeClass("bottom");
            animationStarted  = false;
        };        
    });
});