Hiện thanh Menu (Navbar) khi trượt lên với jQuery

Xem demo Tải về

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!