Sticky sidebar - Cố định Widget sidebar khi scroll chuột
  • Bầu cử Quốc hội Mỹ giữa nhiệm kỳ

    Cập nhật: 10:15 17/11/2022

    Hạ viện
    210 Dân chủ
    218 Cộng hòa
    7 chưa xác định
    218
    Thượng viện
    50 Dân chủ
    49 Cộng hòa
    1 chưa xác định
    50

Hướng dẫn Sticky sidebar - Cố định Widget sidebar khi scroll chuột

  • Chủ đề tạo bởi Admin 
  • Ngày gửi
Admin
Admin 
Trả lời: 1 Lượt xem: 1.140 Biểu cảm: 0
Vấn đề cố định widget sidebar (cột bên phải) khi cuộn chuột đối với trang chủ dài có nhiều chuyên mục, với bài viết có nội dung dài, nhiều bình luận được nhiều người rất yêu thích từ XF 1 cho đến XF 2.2, demo sẽ là Diễn đàn công nghệ VNT. Vì vậy, hôm nay mình sẽ hướng dẫn các bạn thực hiện điều này bằng code CSS thay vì dùng js như một số bài hướng dẫn khác và có thể gây lỗi.

* Với XF 1
Yêu cầu cài add-ons Widget FrameWork, sau đó mở template navigation tìm <div class="navTabs"> và thay bằng <div class="navTabs" id="topmenu">.

Download file đính kèm, tải lên và giải nén vào thư mục js trên host. Mở file fixed.js sửa id widget cho phù hợp.

* Với XF 2.1
Các bạn thêm vào file extra.less code sau:
Mã:
@m-sticky-top: 48px;

@media (min-width: (@xf-responsiveWide + 1px)) {
    .p-body-main--withSidebar {
        display: flex;
        align-items: flex-start;

        .p-body-content {
            flex: 1 1 auto;
            display: block;
            width: ~"calc(100% - @xf-sidebarWidth)";
        }

        .p-body-sideNav,
        .p-body-sidebar {
            flex: 0 0 auto;
            display: block;
        }

        @supports ((position: sticky) or (position: -webkit-sticky)){
            .p-body-sidebar {
                position: -webkit-sticky;
                position: sticky;
                top: 10px;
                & when (@xf-publicNavSticky = primary) or (@xf-publicNavSticky = all) {
                    top: @m-sticky-top * 1px + 10px;
                }
            }
        }
    }
}
* Với XF 2.2
Khi sử dụng code này trên XF 2.2 sẽ bị lỗi là cột p-body-content sẽ bị thu nhỏ lại, trông diễn đàn sẽ rất xấu như hình:

error code.png

Để giải quyết vấn đề này, các bạn chỉ cần sửa lại code trên một chút sẽ được như forum VNT.

Chúc các bạn thành công!
 

Tệp tin đính kèm

  • js.zip
    2,2 KB · Lượt xem: 0
Từ khóa
floating sidebar sticky sidebar widget sidebar
1 Bình luận
Back
Top