Hướng dẫn làm Menu ẩn hiện khi scroll bằng Headroom.js

Thứ sáu - 26/08/2016 10:13
Menu là thành phần không thể thiếu trên bất kì một website nào, nó có tác dụng điều hướng người dùng di chuyển trên trang web. Có nhiều cách để thể hiện menu tuy nhiên thông dụng nhất vẫn là menu nằm ngang và khi người dùng kéo thanh cuộn (scroll) menu này có thể chạy theo (fixed menu) hoặc sẽ ở lại phía trên.
Một fixed menu sẽ gây chú ý của người dùng hơn vì lúc nào nó cũng hiện lên trước mặt người dùng. Nhưng ở nhiều trường hợp nó cũng không hợp lý lắm nhất là menu đó không hướng tới nội dung mà người dùng đang quan tâm hay có nhiều liên kết phức tạp rối rắm. Đối với những menu như thế thì không nên fixed bởi nó rất gây ức chế cho người dùng.

Tuy nhiên ta vẫn còn 1 cách khác có thể giúp khắc phục điểm yếu này đó là làm cho nó chỉ hiển thị mỗi khi người dùng có ý định di chuyển tới một mục khác hay khi đọc xong nội dung trên trang. Trường hợp này thường hay xảy ra khi người dùng cuộn ngược lên phía đầu của website đồng thời thì menu cũng nằm ở trên đó. Do đó, giải pháp tốt nhất là khi người dùng cuộn ngược lên ta sẽ show menu ra còn khi scroll xuống dưới menu sẽ tự ẩn đi.

Cách đơn giản nhất để làm việc này đó là bạn phải lưu giá trị của scrollToTop của một div nào đó lại. Mỗi khi users kéo thanh cuộn thì đem giá trị mới và giá trị cũ ra so sánh với nhau để xác định được hướng scroll, scroll lên thì hiện menu còn scroll xuống thì hide cái menu đi. Tuy nhiên hôm nay mình sẽ giới thiệu tới các bạn một thư viện được viết sẵn sẽ giúp bạn làm việc này, rất dễ sử dụng và gọn nhẹ mang tên Headroom.JS

Headroom.Js

Đây là một thư viện đã được viết sẵn giúp ta thực hiện điều vừa nói ở trên. Bạn có thể xem thêm thông tin ở trang chủ của nó mình đã cập nhật phía trên. Thư viện này khá độc lập vì nó không đòi hỏi 1 thư viện nào khác như là jQuery, vì thế bạn hoàn toàn có thể dùng riêng nó, tuy nhiên muốn dùng chung với jQuery, Zepto hay Angular cũng đều được.

HTML

Trước tiên bạn hãy thêm class “headroom” vào menu mà bạn muốn, ví dụ: ( /themes/default/modules/menu/global.bootstrap.tpl)
<nav id="menu-site-default" class="collapse navbar-collapse headroom">
...
</nav>
CSS

Việc đầu tiên là bạn nên làm cho .headroom fixed cùng 1 số thuộc tính về transition:
.headroom {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
right: 0;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
Nếu bạn có muốn đổi tốc độ hiệu ứng thì hãy chỉnh giá trị của animation-duration nhỏ lại nhé.

Giờ ta đã định nghĩa hiệu ứng khi cuộn lên cuộn xuống. Headroom.js sẽ thêm class headroom-pinned khi àm navbar xuất hiện và headroom-unpinned khi mà navbar bị ẩn. Do đó ta sẽ làm hiệu ứng như sau:
.headroom--unpinned {
top: -80px;
-webkit-transition: .25s;
-o-transition: .25s;
-moz-transition: .25s;
-ms-transition: .25s;
transition: .25s;
-webkit-transform: translateY(-80px);
-o-transform: translateY(-80px);
-moz-transform: translateY(-80px);
-ms-transform: translateY(-80px);
transform: translateY(-80px); /*quyết định ẩn hay hiện menu */
}
.headroom--pinned {
top: 0;
transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
-webkit-transition: .5s;
-o-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
transition: .5s;
}
Javascript

Cuối cùng là js. Bạn hãy thêm những file sau vào trong cặp thẻ <head></head> của header hay footer website.
<script src="http://cdnjs.cloudflare.com/ajax/libs/headroom/0.7.0/headroom.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/headroom/0.7.0/jQuery.headroom.min.js"></script>
Sau đó bạn hãy tạo headroomJs bằng code sau: (Trường hợp của tôi sử dụng Nukeviet, tôi chèn vào /themes/default/modules/menu/global.bootstrap.tpl) trong thẻ 
<script type="text/javascript" data-show="after">
Đặt đoạn code dưới vào đây
</script>
 
(function ($) {
$(function () {
$("#menu-site-default").headroom({
// vertical offset in px before element is first unpinned
offset : 100,
// or you can specify tolerance individually for up/down scroll
tolerance : {
up : 1000,
down : 20
},           classes : {               // when element is initialised
initial : "headroom",
// when scrolling up
pinned : "headroom--pinned",
// when scrolling down
unpinned : "headroom--unpinned",
}
});
}); // end of document ready
})(jQuery); // end of jQuery name space

Vậy là Navbar của bạn đã xong, hãy F5 và scroll để xem thanh quả của mình.

Ý nghĩa những tham số của phương thức headroom sẽ như sau:

  • offset: nếu số pixel scroll từ trang top của nó nhỏ hơn offset thì sẽ không cần phải ẩn navbar.
  • tolerance: nếu số pixel trong 1 lần cuộn trang lớn hơn tolerance thì nó sẽ ẩn/hiện
  • classes: những class mà bạn muốn thêm vào khi ẩn/hiện

Chi tiết thì bạn tham khảo thêm trên trang document của headroomJs nhé.

Lời kết

Bạn cũng có thể làm menu phía dưới site tương tự như menu phía trên website. Ngoài ra còn một ý tưởng khác đó là khi người dùng scroll hết nội dung bài viết thì showmenu ra cũng rất hay, khả năng gây chú ý cao. Chúc các bạn thành công!

Nguồn bài viết: Sưu tầm có chỉnh sửa

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Thống kê truy cập
  • Đang truy cập43
  • Máy chủ tìm kiếm1
  • Khách viếng thăm42
  • Hôm nay231
  • Tháng hiện tại6,326
  • Tổng lượt truy cập73,209
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây