HTML
Trong ví dụ này mình sử dụng Navbar mặc định của Bootstrap, gồm class navbar-static-top
(tham khảo ở đây) sẽ cho thanh menu ở trên cùng và class navbar-fixed-top
(tham khảo ở đây) sẽ cho menu trượt theo màn hình.
Mặc định, ta sử dụng navbar-static-top
.
<nav class="navbar navbar-default navbar-static-top"> ... </nav>
jQuery
Sử dụng sự kiện $(window).scroll();
để nhận biết khi cuộn, so sánh vị trí hiện tại với vị trí trước đó để biết đang trượt lên hay trượt xuống, các bạn xem ví dụ sau.
$(document).ready(function() { var lastScrollTop = 0; $(window).scroll(function() { var currentScrollTop = $(this).scrollTop(); if (currentScrollTop < lastScrollTop) { // Trượt lên } else { // Trượt xuống } lastScrollTop = currentScrollTop; }); });
Khi trượt lên, đổi class navbar-static-top
thành navbar-fixed-top
để thanh menu trượt theo màn hình và ngược lại, ta được như sau.
$(document).ready(function() { var lastScrollTop = 0; $(window).scroll(function() { var currentScrollTop = $(this).scrollTop(); if (currentScrollTop < lastScrollTop) { $('nav.navbar').removeClass('navbar-static-top').addClass('navbar-fixed-top'); $('body').css('padding-top', ($('nav.navbar').height() + 21)); // Với 20px là margin-bottom của navbar, 1px là border của navbar } else { $('nav.navbar').addClass('navbar-static-top').removeClass('navbar-fixed-top'); $('body').css('padding-top', '0px'); } lastScrollTop = currentScrollTop; }); });
Chúc các bạn thành công!