Headroom Js – Thư viện giúp ẩn hiện header chuyên nghiệp

Headroom Js  là một thư viện JavaScript giúp bạn ẩn hiện dễ dàng phần header khi lăn chuột trong trang. Thư viện này tương đối hữu dụng và phổ biến đối với lập trình viên web. Trong bài viết này mình xin giới thiệu với các bạn Headroom Js – Thư viện giúp ẩn hiện header chuyên nghiệp.

Vậy trước khi bắt đầu cấu hình, sử dụng chi tiết chúng hãy hỏi:…

Tại sao dùng Headroom js?

Header cố định (fixed) vẫn là xu thế chính trong wesbite, bởi nó giúp người dùng dễ dàng điều hướng website. Tuy nhiên với những màn hình lớn, theo chiều ngang thì Header cố định sẽ chiếm một khoảng kha khá trên màn hình (theo chiều dọc).

Headroom js cho phép bạn đưa các phần tử vào xem khi thích hợp và tập trung vào nội dung của bạn trong thời gian còn lại.

See the Pen Headroom.js demo by vinh (@vjhnguyen) on CodePen.light

 

Cấu hình cơ bản

Dưới đây là một số cấu hình cơ bản dùng cho headroom js, trong đó gồm 3 phần chính là:

  • Khai báo với JS/ jQuery
  • Thêm các Options
  • CSS

Với JS thuần

Hoặc jQuery

Với Options

CSS

Áp dụng ví dụ thực tế

Đối với việc Header cố định (fixed) thì cũng khá đơn giản khi bạn có thể áp dụng hết phần cấu hình bên trên. Tuy nhiên với phần ví dụ dưới đây có phần khó hơn, hãy cùng xem nhé. https://vinhweb.com/lingo/products.html

headroom example

Ở ví dụ này bạn có thể thấy, khi lăn chuột header:

  • Header cố định khi lăn chuột. (lăn xuống biến mất, lăn lên xuất hiện)
  • Khi trên top, header lại đặt vào đúng vị trí.

Bài toán này phải giải quyết ra sao? Mình có chia thành:

  • 2 Header
  • 1 Header được đặt đúng vị trí trên top
  • 1 Header khác áp dụng Headroom. Và ẩn đi khi lên top.

Với phần code như sau:

JS

CSS

Một ví dụ khác https://shopquatructuyen.com/.

Ngoài ra, Ví dụ kiểu Headroom 2

Bạn có thể thấy ví dụ này cũng tương đối giống bên trên, tuy nhiên chúng ta có sử dụng thêm về offset: 205, thuộc tính này có tác dụng sau một khoảng 205px headroom lăn, kéo lên mới có tác dụng.
Các bạn có thể copy ngay code dưới đây của mình và sử dụng ngay.

Code JS

Code CSS:

Kết

Okay, vậy là bạn đã đọc xong Headroom Js – Thư viện giúp ẩn hiện header chuyên nghiệp. Hi vọng bài viết này có ích với bạn, hãy để lại bình luận cho mình biết ý kiến của bạn nhé.

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
trackback

[…] Mở rộng thêm, để hiển thị mobile chuyên nghiệp hơn, bạn hãy sử dụng: Headroom Js – Thư viện giúp ẩn hiện header chuyên nghiệp […]

%d bloggers like this: