Tutorial 2x Sticky sidebar - Cố định Widget khi scroll chuột

[thahtrung06]

Vấn đề cố định widget ở cột bên phải khi cuộn chuột được nhiều người rất yêu thích từ XF 1 cho đến XF 2.2, demo sẽ là link ở chữ ký của mình (nếu được admin cho phép thì mình sẽ đăng link demo lên đây). 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.

* Với XF 1
Các bạn thực hiện theo bài hướng dẫn: Floating Sidebar Widget - Cố định Widget khi scroll chuột tại đây.

* 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, để 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.

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