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.

Demo Trực Tiếp

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;
}

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à mình chia sẻ dưới mã hiện có.

Bước 2: 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.

Bước 3: Tiếp tục thêm mã Javascript vào bên trên thẻ  </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.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>

Hãy nhớ, điều chỉnh  ID header cho đúng id menu blog của bạn

 
Bước 4: Cuối cùng lưu mẫu và xem kết quả cuối cùng.

Kết Luận

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, bài này mình chia sẻ 1 cách đơn giản nhất tích hợp luôn vào blog của các bạn. Hy vọng rằng bài viết trên sẽ giúp ích cho các bạn trong quá trình thiết kế blogspot. Chúc các bạn thành công!

Bài viết thuộc www.vozshare.com

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *