Hướng dẫn tạo Menu ẩn hiện khi cuộn trang với Jquery

Hầu như mọi trang Web đều có Menu ngang phía trên hoặc dưới Header (Navigation menu), Và nếu bạn muốn cho menu này ẩn đi khi cuộn trang xuống dưới và hiện lên khi cuộn trang lên trên thì làm theo hướng dẫn dưới đây.

DEMO

Xác định class của menu đang sử dụng:

Nếu đoạn code HTML của menu có dạng:

<div class='menu-wrapper'>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
</div>

thì class của menu đang sử dụng là menu-wrapper

Thêm CSS

Thêm đoạn CSS bên dưới lên trên thẻ </style>

.menu-wrapper{position:fixed;left:0;top:0;z-index: 99;}
.scroll{top:-90px}
.no-scroll{top:0;z-index:9999}
 @media screen and (max-width:500px){.menu-wrapper{position: relative!important; z-index: initial;}}

Trong đó menu-wrapper là class của menu, 500px là độ phân giải khi menu chuyển từ giao diện Desktop sang mobile

Thêm Javascript:

Thêm đoạn code bên dưới vào trước thẻ đóng </body>:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript'>
//<![CDATA[    
$(function(){var o=$(document).scrollTop(),n=$(".menu-wrapper").outerHeight();$(window).scroll(function(){var s=$(document).scrollTop();$(document).scrollTop()>=50?$(".menu-wrapper").css("position","fixed"):$(".menu-wrapper").css("position","fixed"),s>n?$(".menu-wrapper").addClass("scroll"):$(".menu-wrapper").removeClass("scroll"),s>o?$(".menu-wrapper").removeClass("no-scroll"):$(".menu-wrapper").addClass("no-scroll"),o=$(document).scrollTop()})});
//]]>
</script>

Thay toàn bộ menu-wrapper bằng tên class mà menu đang sử dụng. Nếu trong template đã có sẵn thư viện Jquery thì bỏ dòng đầu đi.
Lưu template lại và xem kết quả.