Tạo một Tiêu đề dính tự động ẩn với Headroom.js

Tự động ẩn tiêu đề đã được phổ biến đều đặn trong thiết kế web trong một thời gian khá lâu. Nhiều blog và tạp chí trực tuyến sử dụng tiêu đề dính để giữ người dùng tham gia và cung cấp cho họ quyền truy cập trực tiếp vào điều hướng.

Trung bình có xác định lại tính năng này với một khái niệm cơ bản rằng ẩn điều hướng trong khi di chuyển xuống nhưng cho thấy nó trong khi cuộn lên. Khái niệm này đã trở thành một xu hướng cực kỳ phổ biến và bây giờ bạn có thể dễ dàng nhân rộng nó sử dụng Headroom.js.

Headroom.js là một thư viện JavaScript vanilla miễn phí không phụ thuộc hoặc các tính năng API quá mức. Bạn chỉ cần thêm nó vào HTML của mình, nhắm mục tiêu tiêu đề trang và để nó chạy.

Trụ sở đơn giản thêm và xóa một số lớp CSS nhất định để mà hiển thị / ẩn tiêu đề sử dụng JavaScript để phát hiện chuyển động.

Bạn có thể tự thực hiện chức năng này nhưng tại sao phải bận tâm? Headroom đã được thử nghiệm và hỗ trợ tất cả các trình duyệt chính. Thậm chí nó chơi tốt với jQuery hoặc Zepto nếu bạn đã cài đặt thư viện JS trên trang web của mình.

Bạn sẽ tìm thấy nhiều mẫu mã trong repo GitHub nhưng đây là một ví dụ đơn giản nhắm mục tiêu # tiêu đề thành phần:

 var myEuity = document.querySelector ("# tiêu đề"); // tạo một đối tượng Headroom đi qua trong phần tử #header var headroom = new Headroom (myEuity); // khởi tạo thư viện headroom.init (); 

Các trong đó() chức năng có nhiều tùy chọn để tùy chỉnh. Bạn có thể tùy chỉnh khác nhau các lớp phần tử, cùng với khác nhau gọi lại kích hoạt sự kiện nơi bạn có thể nhúng các chức năng của riêng bạn. Chẳng hạn, nếu bạn muốn phần tử mờ dần sau khi nó không được xem, bạn sẽ sử dụng onUnpin gọi lại.

Các tùy chọn này là tất cả được liệt kê trên trang plugin chính, vì vậy hãy kiểm tra nó và xem những gì bạn nghĩ. Nếu bạn muốn thấy Trụ sở chính trong hành động hãy nhìn vào cây bút dưới đây có chứa một bản sao đầy đủ của trang demo chính.