Cố định menu khi cuộn trang CSS

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.

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.

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.

Menu cố định khi cuộn trang hay còn gọi là Floating menu giúp website của bạn chuyên nghiệp và đẹp mắt hơn. Trong bài viết này Vnkings sẽ giúp các bạn tự tạo cho mình 1 menu cố định như thế.

– Đầu tiên bạn cần xác định Class hay ID đang chứa menu:

Với Trang Vnkings của mình, class của Menu cần cố định chính là  : head_nav

– Tiếp đến bạn thêm đoạn Javascript này vào bất kỳ đâu trong cặp thẻ body :

• Lưu ý đoạn này : var $filter = $(‘.head_nav‘);   Các bạn thay bằng Class tìm được ở bên trên nhé.
• mục đích của đoạn Javascript là khi bạn Cuộn chuột đến thẻ có class .head_nav thì nó sẽ thêm 1 Class nữa có tên là Fix

Lúc này hãy thử kiểm tra code khi cuộn trang đã thêm Class Fix

– Tiếp theo bạn cần CSS cho class Fix này giúp Menu luôn ở vị trí đầu của trang :

.head_nav.fix {
  left: 0;
  max-width: 100%;
  overflow: visible;
  position: fixed !important;
  top: 0;
  width: 100%;
  z-index: 1000;
}

Bây giờ các bạn ra trang web của mình và F5 thử xem thành công chưa nhé

Demo https://wordpress.vnkings.com
Hoặc tải ví dụ đơn giản của Vnkings : Tải về

Chúc các bạn thành công!