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ý.

Ở 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!

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:


<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">WEBSITE NAME</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

Tiếp theo mình sẽ thêm 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)

$(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");
    }
  }
});

Demo:

See the Pen Sticky Nav Boostrap 3 by Hoàng Nguyễn (@hoangnhh140697) on CodePen.0

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

Sticky Nav Menu cho Boostrap 4

Code mẫu:

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 à?”.

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

Việc cần làm là thêm class sticky-top vào trong thẻ <nav>

Ta được đoạn code sau:

<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Demo:

See the Pen Sticky Nav Boostrap 4 by Hoàng Nguyễn (@hoangnhh140697) on CodePen.0

Quá dễ dàng phải không :)))

Kết luận

Tóm lại ngắn gọn là chúng ta nên chuyển sang sử dụng Boostrap 4 thay vì dùng Bootstrap 3 :)) còn tại sao thì như các bạn đã thấy rồi đó.