JSFiddle - React, Tailwind, and code Playground

by Jack Paller

HTML

<div id="headbar">

<div id="wrap-headbar">

<div id="top-headbar">
<a href="#" id="open_lmenu"></a>

</div>
<div id="bottom-headbar">
<ul>
<li><a href="">ГЛАВНАЯ</a></li>
<li><a id="active" href="">НОВОСТИ</a></li>
<li><a href="">РУБРИКИ</a></li>
<li><a href="">ВИКИ</a></li>
</ul>
</div>

</div>

</div>



<div id="lmenu_bg"><div id="lmenu">Менюшка нах<a href="#" id="close"></a></div></div>

CSS

body{
min-width:300px;
max-width:600px;
margin:0px;
padding:0px;
height:5000px;
font-family:verdana;
}
#headbar{
background:#4c82ff;
width:100%;
min-height:60px;
position:absolute;
top:0px;
}
#headbar ul, #headbar li{
margin:0px;
padding:0px;
list-style-type:none;
}
#headbar ul{
}
#headbar li{
display:inline-block;
}
#wrap-headbar{
}
/********** left-headbar **********/
#top-headbar{
width:100%;
height:60px;
padding:0px;
position:relative;
z-index:99999;
}
#open_lmenu{
background:url(http://exmc.wc.lt/styles/img/ic_drawer_white.png) no-repeat 16px 16px;
display:block;
width:60px;
height:60px;
}
#lmenu{
background:#fff;
display:none;
width:200px;
height:100%;
position:fixed;
top:60px;
left:0;
display:990;
z-index:9998;
}
#lmenu_bg{
background:rgba(0,0,0,0.2);
display:none;
width:100%;
height:100%;
position:fixed;
top:0px;
display:990;
z-index:9997;
}
/********** center-headbar **********/
#bottom-headbar{
background:#4c82ff;
text-align:center;
width:100%;
padding:0px;
position:relative;
}
#bottom-headbar a{
font-family:Helvetica-Medium;
text-decoration:none;
color:#b2c9ff;
padding:8px;
display:block;
}
#bottom-headbar a:hover{
color:#fff;
text-decoration:none;
}
#bottom-headbar #active{
color:#fff;
border-bottom:2px solid #fff;
}

JavaScript

$(function(){
var $HeadBar=$('#headbar');
var headerHeight=$HeadBar.height();
var headerPosition=$HeadBar.offset().top;
var headerInitialPosition=headerPosition;
var lastPosition=0;
var scrollUp=false;$HeadBar.width($HeadBar.width());
$(window).scroll(function(){
var position=$(window).scrollTop();
if(lastPosition>position){
if(position<=headerInitialPosition){
$HeadBar.css({position:'absolute',top:'0px'})
}else{
if(!scrollUp){
headerPosition=position-headerHeight;
$HeadBar.css({position:'absolute',top:headerPosition+'px'})
}else{
if(position<=headerPosition){
$HeadBar.css({position:'fixed',top:'0px'})
}}}scrollUp=true
}else{
scrollUp=false;
headerPosition=$HeadBar.offset().top;
$HeadBar.css({position:'absolute',top:headerPosition+'px'})}lastPosition=position})

var lmenu = $('#lmenu');
var lmenubg = $('#lmenu_bg');
$('#open_lmenu').click(function(e){
    e.preventDefault();
    e.stopPropagation();
	lmenubg.css({display: 'block'});
    lmenu.show().animate({width: '300px'}, 100);
});
$('#close_lmenu').click(function(e){
    e.preventDefault();
});
$(document).click(function(e){
    if(e.target == block[0]) return false;
	lmenubg.css({display: 'none'});
    lmenu.animate({width: '0'},100,function(){
        $(this).hide();
    });
});
lmenu.click(function(e){
    e.stopPropagation();
});
});