• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • Upgrade Your Account
    Hello Guest! Upgrade your account to download all VIP Resource here

Hướng dẫn Sticky Widget for XenForo 2

NamLee

Bơ Đi Mà Sống
Staff member
Joined
Dec 11, 2015
Messages
2,460
Chủ thớt
#1
NamLee đã đăng tài nguyên mới:

Sticky Widget XenForo 2 - Cố định widget khi cuộn trang cho XenForo 2

Cố định widget khi cuộn trang cho XenForo 2 - Sticky Widget XenForo 2

Demo

View attachment 2387

Hướng dẫn:
- Mở file Extra.less thêm vào dưới cùng
CSS:
.p-body-sidebar {display: table-cell !important}
- Mở template của widget cần sticky, thêm id="name" vào sau class="..." của thẻ div đầu tiên
Ví dụ:
View attachment 2388

- Mở template helper_js_global thêm vào bên trên </xf:macro> ở cuối template đoạn js sau...
Đọc thêm về tài nguyên này...
 
Joined
Nov 6, 2017
Messages
50
#2
Mở template của widget cần sticky, thêm id="name" vào sau class="..." của thẻ div đầu tiên ===> template của widget là cái nào anh ???
 

NamLee

Bơ Đi Mà Sống
Staff member
Joined
Dec 11, 2015
Messages
2,460
Chủ thớt
#4
Mở template của widget cần sticky, thêm id="name" vào sau class="..." của thẻ div đầu tiên ===> template của widget là cái nào anh ???
1513167711122.png

E muốn dùng cái nào thì mở cái đó lên mà edit, e cần xác định được template widget
 

NamLee

Bơ Đi Mà Sống
Staff member
Joined
Dec 11, 2015
Messages
2,460
Chủ thớt
#8
vì thế nên e chỉ nên chọn cái widget dưới cùng thôi, còn làm nguyên cái sidebar thì phải edit và làm cách khác, a chưa thử.
 
Joined
Nov 6, 2017
Messages
50
#13
vào PAGE_CONTAINER thay
Code:
            <xf:if is="$sidebar">
                <div class="p-body-sidebar">
                    <xf:ad position="container_sidebar_above" />
                    <xf:foreach loop="$sidebar" value="$sidebarHtml">
                        {$sidebarHtml}
                    </xf:foreach>
                    <xf:ad position="container_sidebar_below" />
                </div>
            </xf:if>
thành

Code:
            <xf:if is="$sidebar">
                <div class="sticky-sidebar">
                <div id="name" class="p-body-sidebar">
                    <xf:ad position="container_sidebar_above" />
                    <xf:foreach loop="$sidebar" value="$sidebarHtml">
                        {$sidebarHtml}
                    </xf:foreach>
                    <xf:ad position="container_sidebar_below" />
                </div>
                </div>
            </xf:if>
code cũ sửa lại đôi chút thành
Code:
<script>if ($(window).width() > 768) {
$('.sticky-sidebar #name').stick_in_parent({parent: '.p-body-main', spacer: '.sticky-sidebar', offset_top: 60});
}</script>
 

Facebook Comment

Similar threads

New posts New resources Most viewed threads Threads with more replies