Hướng dẫn tạo Sticky Navigation bằng jQuery

Cập nhật: Lượt xem: 1061 [ Javascript ]

Rất nhiều website sử dụng tính năng ” sticky ” cho các menu trên trang web của họ. Tính năng này sẽ giúp các thanh menu sẽ luôn dính trên cùng của trang. Có rất nhiều jQuery plugins giúp chúng ta tạo chức năng này ,nhưng trong bài viết này chúng ta sẽ tự tay viết vài dòng jQuery.

Hướng dẫn tạo Sticky Navigation bằng jQuery

 

HTML

Đầu tiên, chúng ta sẽ cần có khung chuẩn html như sau :

<header>
  <h1>This is a Sticky Nav Demo!</h1>
  <p>Creating one of these isn't so bad. Let's learn how with this sweet little demo!</p>
</header>
<nav class="main-nav">
  <a href="#">Nav Link 1</a>
  <a href="#">Nav Link 2</a>
  <a href="#">Nav Link 3</a>
  <a href="#">Nav Link 4</a>
</nav>
<div class="main">
</div>

CSS

Sau đó chúng ta định dạng cơ bản cho menu.

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding-top: 250px;
}
header {
  height: 300px;
  padding-top: 50px;
  background: #f07057;
}
.main-nav,
.main {
  position: relative; 
}
.main-nav {
  background: #fff;
  height: 80px;
  z-index: 150;
  margin-bottom: -80px;
  box-shadow: 0 2px 3px rgba(0,0,0,.4);
}
header,
.main-nav-scrolled {
  position: fixed;
  width: 100%;
  top: 0;
}
.main {
  background: #f2f2e8;
  padding: 110px 50px 50px;
  column-count: 2;
  column-gap: 40px;
}
 
p {
     margin-bottom: 24px;
}
header, .main-nav {
   text-align: center;
}
header {
  color: #f7f8ee;
}
.main-nav a {
     font-size: .9em; 
     text-decoration: none;
     font-weight: bold;
     text-transform: uppercase;
     color: #444135;
    display: inline-block;
    margin: 24px 12px;
}
.main-nav a:first-child {
   border-top: 2px solid #f07057;
   padding-top: 10px;
}
.main h2 {
   column-span: all;
}

jQuery

Cuối cùng là các bạn sử dụng đoạn script sau cho việc tạo chức năng “sticky”.

var  mn = $(".main-nav");
    mns = "main-nav-scrolled";
    hdr = $('header').height();
 
$(window).scroll(function() {
  if( $(this).scrollTop() > hdr ) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});

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