Ẩn Sticky Menu khi cuộn xuống và hiện lại khi cuộn lên cho Blogger

Hide Sticky Menu on scroll down and show on scroll up

Trong bài viết trước Cố định, tạo "Sticky" Floating Menu và Widget cho Blogger chắc hẳn các bạn đã tạo được cho mình một "Sticky Menu" ưng ý rồi chứ? Hôm nay Iris Tips sẽ chia sẻ cho các bạn một thủ thuật nâng cao của "Sticky Menu", giúp cho menu của bạn trông hiện đại và chuyên nghiệp hơn, đó là "Ẩn Sticky Menu khi cuộn xuống và hiện lại khi cuộn lên cho Blogger".

Thủ thuật khá hữu ích khi các bạn lướt web bằng di động, không bị "Sticky Menu" chiếm mất một phần diện tích màn hình. Bạn cũng có thể Demo trực tiếp thủ thuật này khi truy cập Iris Tips trên điện thoại di động đấy.

HTML

1Đầu tiên các bạn cần xác định Class hoặc ID chứa Menu, trong ví dụ là .menu

Xem thêm: Cách xác định ID của một Widget trong Blogger

2Tiếp theo vào Mẫu >> Chỉnh sửa HTML, tìm đến đoạn code HTML thanh Menu, ví dụ

<div class="menu">
...
</div>

Sau đó bạn thêm class nav-down vào thẻ div chứa thanh Menu

<div class="menu nav-down">
...
</div>

CSS

3Dán đoạn CSS dưới đây trước thẻ ]]></b:skin>

.nav-up {
    top: -40px;
}

Chỉnh sửa: top: -40px; cho phù hợp với chiều cao thanh menu của website bạn.

jQuery

4Tìm đến thẻ </body> và dán đoạn code dưới đây vào trước thẻ đó.

// Hide Menu on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('.menu').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();
    
    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    
    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('.menu').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('.menu').removeClass('nav-up').addClass('nav-down');
        }
    }
    
    lastScrollTop = st;
}

5Thêm thư viện jQuery dưới đây vào sau đoạn code trên nếu blog của bạn chưa có.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm