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.
Download
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 !