ĐẶT CÂU HỎI

Code cố định một Widget(Stick Widget) tự động trượt khi lăn chuột

Code cố định một Widget(Stick Widget) tự động trượt khi lăn chuột

Để tạo một hiệu ứng thanh trượt cố định ở cột bên các bạn có thể tham khảo bài viết sau đây Code cố định một Widget(Stick Widget) tự động trượt khi lăn chuột.

Sticky Sidebar là một JavaScript thuần túy để tạo thanh trượt tiện dụng thông minh, hoạt động với thanh bên nếu nó cao hơn hoặc ngắn hơn khung nhìn, tích hợp với cảm biến thay đổi kích thước để tự tính lại kích thước một cách tự động khi kích thước của thanh bên hoặc container đã thay đổi, hỗ trợ jQuery / Zepto và tương thích với Firefox, Chrome, Safari và IE9 +.

Code cố định một Widget(Stick Widget) tự động trượt khi lăn chuột

Code cố định một Widget(Stick Widget) tự động trượt khi lăn chuột
Code cố định một Widget(Stick Widget) tự động trượt khi lăn chuột

Mọi thứ cần để thực hiện

khai báo thư viện  ./js/sticky-sidebar.js

  • Khai báo đoạn:  <script type=text/javascript src=./js/sticky-sidebar.js></script>
  •  Đoạn này có thể để ở file:  header.php  hoặc  footer.php  có nhiều sự lựa chọn.

Đoạn Script hiển thị:

  • topSpacing: 20 (tính bằng px) – khoảng cách trên cùng giữa mục Sticker và Header.
  • bottomSpacing: 20 (tính bằng px) – khoảng cách dưới cùng giữa mục Sticker và Footer.

Tiến hàng thực hiện

Cấu trúc HTML của trang web của bạn phải tương tự như vậy để hoạt động:

 

 

=> các bạn có thể thay đổi các tên các class tùy theo website của bạn đang sử dụng.

Lưu ý: Lớp sidebar__inner là class bạn muốn cố định, #main-content là lớp bao bên ngoài cùng.

Ví dụ trên, bạn có thể sử dụng JavaScript sau:

 

Kết luận

Qua bài viết này bạn đã có thể tự tạo được thanh nội dung trượt xuống dưới hoặc chạy lên trên tùy theo vị trí kéo chuột của thanh Scroll Bar ⬆⬇ trên trình duyệt web.

Bạn có thể áp dụng để tạo các banner quảng cáo, tạo thanh chia sẻ bài viết luôn hiển thị trên màn hình hoặc tạo một thanh menu với công dụng tương tự như vậy, việc này sẽ rất có ích cho blog hoặc trang web của bạn nếu như bạn muốn khách truy cập luôn nhìn thấy thông tin quan trọng mà bạn muốn gửi đến họ.

 

Theo : https://chothemeweb.com/

Chấm điểm bài đăng post