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

Trong chế độ xem ban đầu, tiêu đề sẽ xuất hiện khi di chuột qua trang. Khi người đọc cuộn xuống, menu sẽ biến mất. Tuy nhiên, khi người đọc cuộn lên một lần nữa, menu sẽ xuất hiện trở lại ở vị trí cũ.

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

Điều này mang lại cho tôi 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.

Tôi giả sử bạn có một tiêu đề với id tên #header. Tất cả mã sẽ được viết bằng ID đó. Nếu tên ID khác, chỉ cần thay đổi nó.
Nếu tiêu đề vẫn chưa dính, hãy thêm CSS sau. Hãy nhớ, khi nó dính, hãy BỎ LỠ bước này và chuyển thẳng đến số ba!

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

LƯU Ý: dấu chấm (....) có nghĩa là mã CSS tích hợp sẵn có từ trước. Đừng tẩy nó. Chỉ cần thêm CSS mà tôi đã viết dưới mã hiện có.

Thêm mã CSS mới sau đây.

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

Nếu sau này, menu vẫn trông giống một chút khi ẩn nó, hãy tăng giá trị này lên, chẳng hạn như -100px.
Tiếp tục thêm mã Javascript ABOVE </body>. JS đóng một vai trò quan trọng trong việc làm cho menu dính biến mất khi cuộn xuống và xuất hiện khi cuộn lên. Đây là JS thông thường, không cần jQuery. Thật nhẹ nhàng.

 <script> //<![CDATA[
 /*
 Sticky Header. Auto hide on scroll bottom, show on scroll top.
 By: www.voztheme.xyz
 */
 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>

Hãy nhớ, điều chỉnh những cái được đánh dấu với tên ID của mỗi menu.
Cuối cùng lưu mẫu và xem kết quả cuối cùng.

Một ví dụ có thể được nhìn thấy ở đây.

Demo Codepen 

Rất nhiều hướng dẫn về cách làm cho menu nổi xuất hiện và biến mất khi cuộn. Hy vọng rằng nó có thể được dễ dàng hiểu. Thực hành ngay lập tức nó trên các blog tương ứng của họ.