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

thahtrung06

Moderator
Thành viên BQT
Tham gia
12/11/2019
Bài viết
1,103
Được Like
453
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ã:
@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!
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom