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

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-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:

Để 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!

 

[boynetbom]

Thanks ad