HOME ABOUT CONTACT SITEMAP
Category
This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Wednesday, 5 September 2018

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 !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js