Cố định Widget (fixed Widget) khi cuộn trang

Widget là gì?

Widgets dịch từ tiếng anh là “những ứng dụng nhỏ” được sử dụng trên nhiều nền tảng khác nhau. Tại website sử dụng wordpress, Widgets là những mục mà người dùng có thể thêm vào theo sắp xếp của website thường là sidebar trong nội dung trang.

Cố định widget

Cố định widgets (hay còn gọi là Sticky Widget, Fixed Widget, Widgets trượt). Cũng là một widgets bình thường như giải thích ở trên nhưng có thể cuộn theo trang (kéo chuột xuống không bị mất đi) cho đến khi cuộn tới footer.

Việc cố định Widgets có tác dụng gây chú ý cho người dùng khi người dùng đọc nội dung và Sidebar cũng được kéo theo.

Cách tạo Sticky Widget

1. Tạo Sticky Widget bằng Plugin

Trong bài viết này, để tạo Sticky Widgets các bạn sử dụng Plugin Fixed Widget and Sticky Elements for WordPress. Cài đặt thì không cần nói lại, chỉ cần tìm trên thư viện của WordPress và cài đặt thôi. Sau khi cài đặt. Truy cập phần Admin > Widgets để chọn cố định Widgets

Chọn Fixed Widget
Chọn Fix Widget

Sau đó, chọn Fixed Widget hoặc Fix Widget như hình trên và chọn Update là các bạn đã có thể cố định Widget như mong muốn.

2. Tạo Sticky Widget không dùng Plugin

Tại cách này, các bạn bấm F12 (trên chrome) rồi tìm ID (class CSS) của Widget dự định Sticky. Sau đó chèn CSS code cố định như sau:

#id{
position: sticky;
position: -webkit-sticky;
top: 30px; }

Dán CSS trên vào file style.css của trang web của bạn hoặc qua giao diện Admin của WordPress là dược nhé! Để cụ thể hơn mình làm rõ như sau

  • #id : là ID của Widget cần cố định
  • position: sticky; position: -webkit-sticky; là CSS để cố định Widget
  • top: 30px; : Khoảng cách tới top của Website (tương tự Header)

Trường hợp này, mình mò ra, nhưng nếu để nhiều ID thì sẽ bị đè lên nhau, thế nên để mình nghiên cứu tiếp rồi viết thêm.