Smooth Auto Hide Header Navigation

Smooth Auto Hide Header Navigation là một hiệu ứng jQuery rất đẹp khi có sự kiện người dùng cuộn trang lên hoặc xuống. Đây là hiệu ứng phù hợp cho những bạn muốn cố định header khi cuộn trang lên, nhưng lại muốn ẩn khi cuộn trang xuống

Xem demo (cuộn trang lên/xuống để thấy hiệu ứng)

demo
Với sự kết hợp hoàn hảo giữa jQuery và CSS, header của bạn đã có một hiệu ứng rất đẹp, dù cho thanh scrollbar ở bất kì vị trí nào bạn đều có thể trở về header một cách đơn giản

Bạn tự tích hợp jQuery nếu template chưa có sẵn

Yêu cầu cơ bản là bạn biết F12 kiểm tra phần tử để xác định được id hoặc class của thằng header. Ví dụ của tôi là .page-header

Viết CSS bắt buộc cho nó

.page-header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: xxx px; /* should be set */
    overflow: hidden;
    box-sizing: border-box;
    -webkit-transition: top .6s;
    -moz-transition: top .6s;
    -ms-transition: top .6s;
    -o-transition: top .6s;
    transition: top .6s;
}

.page-header.off-canvas {
    top: -xxx px; /* - height of header */
}

.page-header.fixed {
    top: 0;
    z-index: 9999
}

Do nhận position:fixed nên nó sẽ ảnh hưởng tới thành phần ngay bên dưới, vì bậy bạn cần thêm một khoảng margin-top cho thằng dưới để chúng không dính vào nhau. Ví dụ

.page-content {
    margin-top: 3em
}

Cuối cùng là js trước </body>

<script>//<![CDATA[
$(function() {
    var scroll = $(document).scrollTop(), // tọa độ hiện tại khi chưa scroll
        headerHeight = $('.page-header').outerHeight(); // chiều cao header

    $(window).scroll(function() { // bắt sự kiện cuộn trang

        var scrolled = $(document).scrollTop(); // lấy tọa độ mới

        if (scrolled > headerHeight) { // nếu cuộn trang vượt quá header
            $('.page-header').addClass('off-canvas'); // thì ẩn header
        } else {
            $('.page-header').removeClass('off-canvas'); // nếu không thì hiện header
        }

        if (scrolled > scroll) { // cuộn trang xuống
            $('.page-header').removeClass('fixed'); // thì ẩn header
        } else {
            $('.page-header').addClass('fixed'); // cuộn lên thì lại hiện header
        }

        scroll = $(document).scrollTop(); // gán lại tọa độ mới khi dừng scroll
    });
});
//]]></script>

Lưu mẫu lại và kiểm tra thành quả

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