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é.

Bài viết liên quan

  • React Native: Nó là gì? và, Tại sao dùng nó?

    Không sai khi nói rằng điện thoại di động là một phần linh hồn của mỗi người. Và khi nói đến nó, những lập trình viên chúng ta sẽ nghĩ…

  • Chạy ngày, giờ hiện tại với PHP và JavaScript

    Việc lấy ra ngày giờ chính xác với thời gian thực và hiển thị nó ra website, tưởng chừng là đơn giản, nhưng thực ra không phải đơn giản lắm. Trong bài viết này mình sẽ chia sẻ với các bạn về code Chạy ngày, giờ hiện tại với PHP và JavaScript.

  • Scrolling event javascript, bắt sự kiện Cuộn Trang với Javascript.

    Sự kiện Cuộn Trang hay Scrolling event là cái mà chúng ta vẫn thường thực hiện khi vào một website. Do nó xảy thường xuyên, nên hãy bắt lấy nó để tương tác nhiều hơn với người dùng. Trong bài viết này mình sẽ phân tích một ví dụ về Scrolling event javascript, bắt sự kiện Cuộn Trang với Javascript.

  • Countdown Timer – Đặt giờ đếm ngược với mỗi khách vào Web – Không bị reset khi F5

    Để kích thích khách hàng, người vào website mua sản phẩm, người ta đã sáng tạo ra phương pháp sử dụng giờ đếm ngược trong một khoảng thời gian nhất định. Tại bài này mình sẽ hướng dẫn các bạn tạo Countdown Timer – Đặt giờ đếm ngược với mỗi khách vào Web – Không bị reset khi F5 bằng JavaScript thuần.

  • Slider Syncing – Kết nối giữa các slider với nhau – Slick Slider

    Slider Syncing hay kết nối giữa các slider với nhau. Đây là yêu cầu tương đối khó, nếu chúng ta code tay. Tuy nhiên ở bài viết này mình sẽ hướng dẫn các bạn hoàn thành nó nhanh nhất và đơn giản nhất có thể với Slick Slider.

  • Hướng dẫn cài COUNTER-UP jQuery Plugin

    JavaScript càng ngày càng phổ biến và hỗ trợ nhiều mảng. Khi làm về phần khách hàng, hay những dự án đã làm được… Việc thể hiện số liệu là thiết yếu và để làm những con số này đẹp hơn một thư viện có tên Counter-up sẽ giúp bạn. Trong bài viết này, mình sẽ Hướng dẫn cài COUNTER-UP jQuery Plugin.

Bài viết cùng chuyên mục

Leave a Reply

avatar
  Subscribe  
Notify of
Thuê Tôi