Hướng dẫn Menu cố định khi kéo thanh scroll

Đầu tiên bạn tiến hành viết html cho menu trước sau đó mới tiến hành viết css và cuối cùng viết jquery cho nó.

Bước 1: Viết html, bạn tiến hành viết html như dạng sau, bạn cũng có thể viết dạng menu đa cấp cũng vẫn được.

<div class="wrapper-nav" id="main-menu-tto">
 <nav class="nav-main">
  <ul class="clearfix">
   <li><a title="Home" href="#">Home</a></li>
   <li><a title="Thế giới" href="#">Thế giới</a></li> 
   <li><a title="Pháp luật" href="#">Pháp luật</a></li> 
   <li><a title="Kinh tế" href="#">Kinh tế</a></li> 
   <li><a title="Sống khỏe" href="#">Sống khỏe</a></li> 
   <li><a title="Giáo dục" href="#">Giáo dục</a></li> 
   <li><a title="iTuyển sinh" href="#">iTuyển sinh</a></li> 
   <li><a title="Thể thao" href="#">Thể thao</a></li> 
   <li><a title="Bạn đọc" href="#">Bạn đọc</a></li>
 </ul> 
</nav> 
</div> 

Bước 2: Bạn tiến hành viết đoạn mã css để hiển thị sắp xếp sao cho menu nó đẹp đẽ cũng như căn nó ra giữa website

.wrapper { width: 980px; margin: 0 auto; } 
.wrapper-nav{ background: #fff; } 
.wrapper-nav.fixed { width: 100%; position: fixed; top: 0; left: 0; z-index: 7000; box-shadow: 0 0 5px 2px #ccc; } 
.wrapper-nav.fixed .nav-main { width: 980px; margin: 0 auto; } 
.nav-main { height: 36px; } 
.nav-main>ul { position: relative; width: 100%; max-width: 980px; padding: 0px; margin: 0px; } 
.nav-main>ul>li { list-style: none; float: left; padding: 12px 0 10px; border-bottom: solid 1px #ccc; } 
.nav-main>ul>li>a { color: #333; font-weight: 700; float: left; font-size: 14px; padding: 1px 3.6px; border-left: solid 1px #ccc; }

Bước 3: Bạn tiến hành viết jquery thực hiện việc thêm class css vào menu khi kéo thanh scroll đúng vị trí để cố đinh. Ở đây mình sử dụng là “Position: Fixed” để cố định. Còn màu mè như nào thì các bạn tự mắm muối thêm vào website. Lưu ý là phải có thư viện jquery và ở đây mình viết ngay lệnh jquery này trong html thay vì viết sang file có định dạng .js.

<script type="text/javascript">
 jQuery(document).ready(function($) {
 $(window).load(function() {
 if ($('.wrapper-nav').length > 0) {
 var _top = $('.wrapper-nav').offset().top - parseFloat($('.wrapper-nav').css('marginTop').replace(/auto/, 0));       $(window).scroll(function(evt) {
 var _y = $(this).scrollTop();
 if (_y > _top) {
 $('.wrapper-nav').addClass('fixed');
 $('.main-1').css("margin-top", "30px")
 } else {
 $('.wrapper-nav').removeClass('fixed');
 $('.main-1').css("margin-top", "0")
    }
   })
  }
 });
});
</script>

Như vậy là xong. Để có thể tham khảo thêm thì xin mời bạn tải về liên kết sau. Mình đã làm demo trong đó và bạn xem tham khảo cũng như tái sử dụng nó đúng mục đích.