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

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

  Navbar
  
    
  

  

    

      

        Home [current]
      
      

        Link
      
      

        
          Dropdown
        
        

          Action
          Another action
          

          Something else here
        
      
      

        Disabled
      
    
    
      
      Search
    
  

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.