15 Plugin jQuery để tạo các phần tử dính thông minh

Hiện tại thường thấy các yếu tố nhất định trong một trang web được cố định vào một vị trí khi bạn cuộn lên hoặc xuống trang web, ví dụ: menu điều hướng, tiêu đề hoặc thanh bên. Điều này cho phép phần tử có sẵn bất kể vị trí của người dùng.

Được gọi là một yếu tố dính, điều này có thể đạt được chỉ bằng cách sử dụng CSS, tuy nhiên, sử dụng phương pháp này, hiệu quả không đáng tin cậy trên nhiều trình duyệt. Đó là lý do tại sao chúng tôi tập hợp một số thư viện JS và các trình cắm jQuery sẽ cho phép bạn đạt được thiết kế UX cụ thể này mà không gặp rắc rối nào.

1. Điểm tham chiếu

Điểm tham chiếu là một thư viện để thực thi một chức năng dựa trên vị trí phần tử trong chế độ xem. Nó đi kèm với một chức năng phím tắt làm cho yếu tố đó “dính”. Bạn có thể tùy chỉnh hướng cuộn - lên, xuống, và ngay cả đúng và trái - phần tử sẽ dính vào khung nhìn.

Phụ thuộc: Không có / jQuery (tùy chọn)
Giấy phép: Giấy phép MIT

2. Bộ dụng cụ dính

Với Chú ý, bạn không chỉ có thể tạo một phần tử dính trong khung nhìn, mà bạn còn có thể làm cho chúng dính vào phần tử cha mà bạn chỉ định cho nhiều phần tử cùng một lúc. Plugin cũng đi kèm với một số cài đặt nâng cao bao gồm Sự kiện và Triggers tùy chỉnh.

Phụ thuộc: jQuery
Giấy phép: WTFPL

3. Chú ý

Chú ý là một plugin dính jQuery dễ sử dụng thực hiện những gì nó nói. Các plugin hoạt động ra khỏi hộp. Tuy nhiên, nếu bạn cần một số tùy chỉnh, nó đi kèm với Tùy chọn / Cài đặt, Phương thức và Sự kiện tùy chỉnh.

Phụ thuộc: jQuery
Giấy phép: Giấy phép MIT

4. Trụ sở

Một tiêu đề trang dính sẽ chiếm không gian dọc có giá trị tạo nên sự khác biệt khi bạn xem trang trên thiết bị di động. Trụ sở chính là một thư viện JavaScript sẽ làm cho tiêu đề dính của bạn thông minh; tiêu đề sẽ bị ẩn khi người dùng cuộn xuống trang và hiển thị khi cuộn lên.

Phụ thuộc: Không có / jQuery (tùy chọn) / Angular (tùy chọn)
Giấy phép: Giấy phép MIT

5. MakefixedJS

Tiền tố cho phép bạn làm cho các yếu tố được cố định động khi người dùng cuộn trang. Chỉ cần gọi makeFixed () chức năng trên phần tử bạn muốn cố định. Kiểm tra bản demo để xem nó trên hành động.

Phụ thuộc: jQuery
Giấy phép: GPL

6. Nửa đêm

Nữa đêm cho phép bạn gắn nhiều tiêu đề / yếu tố và chuyển đổi giữa chúng dựa trên vị trí của chúng trong tài liệu (cây DOM), kiểm tra bản demo để xem ý tôi là gì. Ngoài ra, bạn có thể thay đổi màu sắc của chúng một cách đơn giản bằng cách thêm nửa đêm dữ liệu thuộc tính với tên màu được chỉ định.

Phụ thuộc: jQuery
Giấy phép: Giấy phép MIT

7. ScrollMagic

ScrollMagic có các tính năng nâng cao để thêm tương tác, trong khi cuộn trang. Bạn có thể ghim các yếu tố từ các vị trí cuộn cụ thể, thêm hình động dựa trên vị trí cuộn hoặc thậm chí tạo hiệu ứng thị sai tuyệt vời. Bản demo cung cấp cho bạn một số thông tin chi tiết về những gì plugin này có thể làm.

Phụ thuộc: jQuery / Velocity.js
Giấy phép: Giấy phép kép (MIT và GPL)

8. trên màn hình

trên màn hình tương tự như Waypoint - nó cho phép bạn thực thi các chức năng khi phần tử đang nhập, rời hoặc đến một số vị trí nhất định trong chế độ xem của trình duyệt.

Phụ thuộc: jQuery
Giấy phép: Giấy phép MIT

9. Pin jQuery

Ghim jQuery là một plugin jQuery nhỏ để “ghim” hoặc là “bỏ ghim” các yếu tố đến một vị trí, khi bạn cuộn trang. Phần yêu thích nhất của tôi về plugin này là tùy chọn tắt nó ở độ rộng khung nhìn nhất định.

Phụ thuộc: jQuery
Giấy phép: Giấy phép BSD

10. Phao dính

Phao dính cho phép chúng ta cung cấp cho các phần tử một vị trí cố định có liên quan đến cha mẹ của nó. Bạn có thể đặt tùy chọn dính theo nhu cầu của mình với các tham số được cung cấp và bằng cách thay đổi giá trị. Xem bản demo tại đây.

Phụ thuộc: jQuery
Giấy phép: Chưa xác định

11. Ngựa vằn

Ngựa vằn là một plugin nhẹ để làm cho bất kỳ yếu tố pin vào container của họ. Với plugin này, bạn có thể thêm “dính” đến các yếu tố trong dự án của bạn như điều hướng, thanh bên, đầu trang và chân trang hoặc các yếu tố khác mà bạn muốn giữ hiển thị khi người dùng cuộn xuống. Kiểm tra bản demo.

Phụ thuộc: jQuery
Giấy phép: Giấy phép GPL

12. HC-Dính

Với HC-dính, bạn có thể tạo các phần tử dính tham chiếu đến vùng chứa của nó, cho bất kỳ phần tử đã cho nào hoặc cho chính tài liệu đó. Plugin này có một số tùy chọn mà bạn có thể điều chỉnh theo nhu cầu của mình, như khoảng cách từ đỉnh và đáy để bắt đầu nổi và các tùy chọn khác.

Phụ thuộc: jQuery
Giấy phép: Giấy phép MIT

13. Mojo dính

Dính Mojo là một plugin jQuery nhẹ, nhanh và linh hoạt để tạo ra các yếu tố dính tuyệt vời. Nó tương thích với các trình duyệt hiện đại và sẽ xuống cấp một cách duyên dáng trong IE.

Phụ thuộc: jQuery
Giấy phép: Giấy phép MIT

14. Thanh dính

Nếu bạn muốn thực hiện điều hướng một trang sẽ dính khi cuộn xuống, thư viện này là dành cho bạn.Thanh dính sẽ đặt điều hướng ở đầu cửa sổ trình duyệt và tô sáng liên kết neo để kết nối với phần tương ứng trên trang của bạn. Bạn cũng có thể thêm Animate.css để làm đẹp hiệu ứng điều hướng.

Phụ thuộc: jQuery
Giấy phép: Giấy phép MIT

15. DínhStack

Chú ý sẽ làm cho các phần tử xếp chồng lên nhau khi người dùng cuộn phần tử và đạt đến đỉnh của chế độ xem. Với thư viện này, trang dài của bạn sẽ chuyển thành các thẻ xếp chồng.

Phụ thuộc: jQuery
Giấy phép: Chưa xác định