Hướng dẫn sticky-top navbar bootstrap 4 - Stick-top navbar bootstrap 4

Giới thiệu

Nếu các bạn đã biết cách sử dụng bootstrap thì vấn đề này sẽ được giải quyết dễ dàng thôi. Chức năng này có tên gọi là Sticky Nav, nó được áp dụng rất nhiều hầu hết trên các website, nếu hiện tại các bạn đang dùng Boostrap 3 (BS3) thì mình khuyên các bạn nên chuyển sang Bootstrap 4 (BS4). Tại vì, BS4 các bạn chỉ cần 1 đoạn class là đã làm được chức năng này rồi, còn nếu các bạn sử dụng BS3 thì có thể sẽ hơi khó khăn một tí khi xử lý.Sticky Nav, nó được áp dụng rất nhiều hầu hết trên các website, nếu hiện tại các bạn đang dùng Boostrap 3 (BS3) thì mình khuyên các bạn nên chuyển sang Bootstrap 4 (BS4). Tại vì, BS4 các bạn chỉ cần 1 đoạn class là đã làm được chức năng này rồi, còn nếu các bạn sử dụng BS3 thì có thể sẽ hơi khó khăn một tí khi xử lý.

Ở bài viết này, mình sẽ thực hiện cả trên BS và BS4 luôn nhé, để những bạn nào dùng BS3 và BS4 đều có thể làm được.

Hướng dẫn

Trước khi làm theo các bạn nhớ nhúng Boostrap vào đã nhé, nếu đã nhúng vào rồi thì next nào!nhúng Boostrap vào đã nhé, nếu đã nhúng vào rồi thì next nào!

Sticky Nav Menu cho Boostrap 3

Code mẫu:

Đầu tiền chúng ta sẽ cần đoạn code navbar của BS3:navbar của BS3:

Tiếp theo mình sẽ thêm CSS vào cho nó:CSS vào cho nó:

.navbar {
  border-radius: 0!important;
}

.sticky {
  position: fixed!important;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}

Đoạn JS để làm Sticky Nav (Nhớ nhúng thư viện jQuery vào trên các JS khác nha)JS để làm Sticky Nav (Nhớ nhúng thư viện jQuery vào trên các JS khác nha)

$(document).ready(function(){
  window.onscroll = function() {
    stickyNav();
  };

  var navbar = $('.navbar');
  var sticky = parseInt(navbar.offset().top);

  function stickyNav() {
  
    if (window.pageYOffset >= sticky) {
      navbar.addClass("sticky");
    } else {
      navbar.removeClass("sticky");
    }
  }
});

Chỉ vài xử lý đơn giản cùng JS là đã có Sticky Nav cho Boostrap 3JS là đã có Sticky Nav cho Boostrap 3

Sticky Nav Menu cho Boostrap 4

Code mẫu:

Đầu tiền chúng ta sẽ cần đoạn code navbar của BS3:

Tiếp theo mình sẽ thêm CSS vào cho nó:

Đoạn JS để làm Sticky Nav (Nhớ nhúng thư viện jQuery vào trên các JS khác nha)

Chỉ vài xử lý đơn giản cùng JS là đã có Sticky Nav cho Boostrap 3

Sticky Nav Menu cho Boostrap 4

Giống như BS3 ta sẽ cần phải có đoạn Nav có sẵn của BS4, bạn nào chưa biết lấy Nav nào thì vào đây để lấy 1 cái nhé.

Với BS4 thì rất đơn giản, sau khi xem đoạn code và giải thích dưới đây thì bạn sẽ phải thốt lên “Wtf! Chỉ đơn giản như vậy thôi à?”.Boostrap 4 thay vì dùng Bootstrap 3 vì nhiều chức năng đã được Bootstrap 4 hỗ trợ rồi không cần phải code lại nữa.

Không giống với cách rườm rà của BS3 thì BS4 chỉ cần thêm một class vào là xong ngay