Горизонтальное фиксированное мобильное меню с эффектом исчезания и появления при скроллинге

  <script>  
$(window).load(function() {  
  $('.loadsitiwaak').fadeOut(0);  
  $('body').removeClass('scrilnonewaak');  
  });  
$(document).ready(function(){
$(".menuwaak").click(function(){
  $(this).toggleClass('activnavwaak');
  $(".meu_sitiwaak").toggleClass("dnonewaak");
  $("body").toggleClass("overwaak");
});
   
});
</script>
<script>  
var lastScrollTop = 0;
$(window).scroll(function(event){
  var st = $(this).scrollTop();
  if (st > lastScrollTop){
  $(".navMenuwaak").fadeOut();
  } else {
  $(".navMenuwaak").fadeIn();
  }
lastScrollTop = st;
});
</script>

<div class="meu_sitiwaak dnonewaak">  

<div class="headerwaak">
  <div class="logowaak">
  <a href="/" title="talantlev.ucoz.ru" class="logo_linkwaak">talantlev.<span>ucoz</span>ru</a>
  </div>
  </div>
   
  <ul>  
  <div class="minprofmenuwaak">
  <a href="talantlev.ucoz.ru">
  <div class="minprofmenuavawaak"><img src="img/b.jpg"></div>
  <div class="minprofmenunamewaak">waak</div>
  </a>
  </div>
  <hr>  
  <li><a href="talantlev.ucoz.ru"><span><i class="fa fa-coffee m1" aria-hidden="true"></i></span> Лента новостей</a></li>  
  <li><a href="talantlev.ucoz.ru"><span><i class="fa fa-shopping-basket m12" aria-hidden="true"></i></span> Магазин</a></li>  
  <li><a href="talantlev.ucoz.ru"><span><i class="fa fa-file-text m10" aria-hidden="true"></i></span> Каталог файлов</a></li>  

<li><a href="talantlev.ucoz.ru"><span><i class="fa fa-headphones m9" aria-hidden="true"></i></span> Музыка</a></li>
  <li><a href="talantlev.ucoz.ru"><span><i class="fa fa-picture-o m7" aria-hidden="true"></i></span> Портфолио</a></li>  
  <li><a href="talantlev.ucoz.ru"><span><i class="fa fa-comments-o m4" aria-hidden="true"></i></span> Форум</a></li>  
  <hr>
  <li><a href="talantlev.ucoz.ru"><span><i class="fa fa-check-square-o m7" aria-hidden="true"></i></span> Заказы</a></li>  
  <li><a href="talantlev.ucoz.ru"><span><i class="fa fa-heart m2" aria-hidden="true"></i></span> Список желаний</a></li>  
  <li><a href="talantlev.ucoz.ru"><span><i class="fa fa-cart-arrow-down m13"></i></span> Корзины </a></li>  
  <li><a href="talantlev.ucoz.ru"><span><i class="fa fa-refresh m15"></i></span> Движение средств</a></li>
  <li><a href="talantlev.ucoz.ru"><span><i class="fa fa-credit-card m8"></i></span> Баланс 0.00</a></li>  
  <hr>
  <li><a href="talantlev.ucoz.ru"><span><i class="fa fa-rub m6" aria-hidden="true"></i></span> Платные услуги</a></li>  
  <li><a href="talantlev.ucoz.ru"><span><i class="fa fa-bullhorn m14" aria-hidden="true"></i></span> Реклама </a></li>  
  </ul>  
</div>

<div class="navMenuwaak">
  <span class="file"><i class="fa fa-file-text" aria-hidden="true"></i></span>
  <span class="shop"><i class="fa fa-shopping-bag" aria-hidden="true"></i></span>
  <span class="search"><i class="fa fa-search" aria-hidden="true"></i></span>
  <span class="smsls"><i class="fa fa-comment" aria-hidden="true"></i><b>2</b></span>
  <span class="menuwaak"><i class="fa fa-bars" aria-hidden="true"></i></span>
  <div class="clr"></div>
</div>

ul {list-style: none;}
.clr {clear: both;}
a {text-decoration: none;}

.overwaak {overflow: hidden;}
.dnonewaak {display: none;}
.scrilnonewaak {overflow: hidden;}

.logowaak {
  display: inline-block;
}

.logo_linkwaak {
  display: block;
  line-height: 40px;
  color: #ffffff;
  padding: 0 10px;
  text-decoration: none;  
  text-transform: uppercase;
  font-weight: 700;
  font-size: 15px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.logo_linkwaak span {color: #F72021}

.logo_linkwaak:focus, .logo_linkwaak:hover, .mob-sswaak:hover {
  background-color: #000;
}

.headerwaak {
  background: #38393D;
  color: #FFF;
  min-height: 40px;
  line-height: 40px;
  padding: 0 10px;
  position: sticky;
  top: 0;
}
.headerwaak span {
  display: inline-block;
  padding: 0 5px;
}

.navMenuwaak {
  background: #FFF;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-top: 1px solid #f1f1f1;
  z-index: 10;
}

.navMenuwaak span {
  width: 20%;
  display: block;
  text-align: center;
  color: #434343;
  font-size: 16px;
  line-height: 40px;box-sizing:border-box;
  float: left;
  cursor: pointer;
  position: relative;
}

.navMenuwaak span:hover, .navMenuwaak span.activnavwaak {color: #4A76A8;}

.smslswaak b {
  position: absolute;
  display: block;
  width: 13px;
  height: 13px;
  color: #FFF;
  font-size: 10px;
  background: #D40000;
  text-align: center;
  line-height: 13px;
  font-style: normal;
  font-weight: 100;
  border-radius: 50%;
  bottom: 50%;
  left: 50%;
}

.meu_sitiwaak {
  max-height: calc(100vh - 40px);
  overflow: auto;
  position: fixed;
  width: 100%;
  background: #FFF;
  z-index: 10;
  top: 0;
}

.minprofmenuwaak {padding: 10px;}
.minprofmenuavawaak {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  float: left;
}
.minprofmenuavawaak img {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

.minprofmenunamewaak {
  font-size: 22px;
  font-weight: 700;
  color: #000;
  line-height: 50px;
  margin-left: 70px;
}

.meu_sitiwaak ul hr {
  background: #f1f1f1;
  margin: 5px 0;
  height: 1px;
  border: 0px;
}

.meu_sitiwaak ul li a {
  display: block;
  list-style: 30px;
  font-size: 14px;
  padding: 5px 10px;
  background: #FFF;
  color: #434343;
}
.meu_sitiwaak ul li a:hover {background: #f1f1f1;}
.meu_sitiwaak ul li a i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  line-height: 30px;
  font-size: 16px;
  color: #FFF;
  text-align: center;
  margin-right: 10px;
}

.m1 {background-color: #86cbf6;}  
.m2 {background-color: #ff6f81;}  
.m3 {background-color: #f7cd40;}  
.m4 {background-color: #ffb55a;}  
.m5 {background-color: #aed488;}  
.m6 {background-color: #ff8869;}  
.m7 {background-color: #78cbc4;}  
.m8 {background-color: #bb69c4;}  
.m9 {background-color: #9ba9d7;}  
.m10 {background-color: #f66091;}  
.m11{background-color: #beaaa5;}  
.m12 {background-color: #82d795;}  
.m13 {background-color: #7d9af7;}  
.m14 {background-color: #a488bc;}  
.m15 {background-color: #c76b54;}  
.m16 {background-color: #697dc4;}  

.smsls b {
  position: absolute;
  display: block;
  width: 13px;
  height: 13px;
  color: #FFF;
  font-size: 10px;
  background: #D40000;
  text-align: center;
  line-height: 13px;
  font-style: normal;
  font-weight: 100;
  border-radius: 50%;
  bottom: 50%;
  left: 50%;
}

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);