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

Xin chào tất cả các bạn, trong quá trình support anh em web develop trên facebook thì anh em đều gặp phải trường hợp là muốn cố định menu như website tuoitre.vn nhưng lại không làm thế nào thì hôm nay Thịnh chia sẻ với anh em cách cố định menu khi thực hiện kéo thanh scroll xuống. Cách này mình mình sử dụng css, html và cả jquery nữa. Nhưng mình sẽ không làm hiệu ứng ẩn hiện ảo diệu nữa mà dạng jquery thêm vào thẻ class đã viết sẵn css cố định rồi. Chính vì thế bạn muốn thêm hiệu ứng ẩn hiện hay ra sao thì có thể thêm một chút css hiệu ứng với cả thêm một chút jquery là nó sẽ ảo ảo chút là được. Còn cụ thể sao để ẩn hiện đẹp thì mình sẽ có bài khác hướng dẫn cụ thể.

Không dài dòng nữa sau đây mình hướng dẫn các bạn.

Đầ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="Chính trị - Xã hội" href="#">Chính trị - Xã hội</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="Văn hóa - Giải trí" href="#">Văn hóa - Giải trí</a></li>
 
   <li><a title="Nhịp sống trẻ" href="#">Nhịp sống trẻ</a></li>

   <li><a title="Nhịp sống số" href="#">Nhịp sống số</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.

Link: mediafire