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

thahtrung06

StaffSergeant
Tham gia
12/11/2019
Bài viết
1,007
Được Like
415
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

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom