Code tự động ẩn hiện menu header khi di chuột lên xuống blogspot

Menu là một thành phần không thể thiếu được trong một Website, nó có tác dụng điều hướng, giúp người dùng di chuyển giữa các mục quan trọng. Có rất nhiều cách thể hiện menu này, nhưng thông dụng nhất là dạng menu nằm ngang. Khi người dùng scroll, thì menu này có thể scroll theo ( fixed ) hoặc sẽ trôi lên phía trên.

Fixed menu sẽ thu hút sự chú ý của user nhiều hơn, vì lúc nào nó cũng hiển thị lên viewport của người dùng. Tuy nhiên trong nhiều trường hợp, nó không được hợp lý cho lắm, nhất là khi menu dẫn tới một nội dung mà người dùng không quan tâm, các liên kết trên menu hướng về những trang nội dung quá khác nhau, hoặc khi menu có quá nhiều liên kết, phức tạp. Đối với những menu như vậy, nếu fixed thì sẽ gây khó chịu cho người dùng.

Có một cách để khắc phục điểm yếu này của fixed menu, đó là chỉ hiển thị nó ra khi người dùng muốn di chuyển tới mục khác, hoặc khi đọc xong nội dung trên trang. Thường thì trường hợp này xảy ra khi người dùng scroll ngược lên phía trên đầu của website, đồng thời menu cũng nằm phía trên đầu. Nên giải pháp tốt nhất lúc này là khi người dùng scroll ngược lên, thì ta sẽ show menu ra, còn khi scroll xuống dưới, thì ta ẩn nó đi.

Bạn có thể làm điều này một cách đơn giản bằng cách lưu lại giá trị scrollToTop của một div nào đó, mỗi khi người dùng scroll thì đem giá trị mới ra so sánh với giá trị cũ để xác định hướng scroll, nếu là scroll xuống, thì bạn cho hide cái fixed menu đi, còn ngược lại thì show ra.

Code tự động ẩn hiện menu header khi di chuột

Điều này mang lại cho bạn đọc một ấn tượng hiệu quả. Chế độ xem trang sẽ đầy đủ từ trên xuống dưới mà không có bất kỳ tiêu đề khó chịu nào. Tuy nhiên, tiêu đề có thể xuất hiện trở lại khi người đọc muốn.

Nếu bạn muốn áp dụng tính năng tự động ẩn menu  trên mỗi blog, hãy làm theo hướng dẫn này cho đến khi hoàn thành.

Bước 1: Thêm css vào phần css class header của blog bạn.

#header{
 ....
 ....
 ....
 position: sticky;
 position: -webkit-sticky;
 top: 0px;
 transition: top .3s ease;
}

#header.show{
 top: -70px;
}

 <script> //<![CDATA[
 /*
 Sticky Header. Auto hide on scroll bottom, show on scroll top.
 By: www.vozshare.com
 */
 var prevScrollpos = window.pageYOffset;
 window.onscroll = function() {
 var currentScrollPos = window.pageYOffset;
 if (prevScrollpos > currentScrollPos) {
 document.getElementById("header").classList.remove('show');
 }
 else { document.getElementById("header").classList.add('show');
 }
 prevScrollpos = currentScrollPos;
 }
//]]> </script>