Hướng dẫn Tạo sticky cho navbar XenForo (Menu luôn đứng yên khi cuộn trang)

Blue

Admin - Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
801
Reaction score
1,253
Thấy có nhiều bạn muốn làm cho Menu top của diễn đàn mình luôn đứng yên khi cuộn trang web xuống nhưng chưa làm được do cách thực hiện quá phức tạp đối với những ai không rành jquery. Hôm nay mình đã tìm ra 1 cách rất đơn giản (đang áp dụng cho VNXF) để làm việc này, đó là sử dụng thư viện jsticky của jquery, các bạn chỉ cần copy đoạn mã bên dưới dán vào template footer là xong.

Mã:
<script type="text/javascript" src="http://vnxf.vn/js/jquery.jsticky.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#header").sticky({
            top: 0,
            zIndex: 11111111
        });
    });
</script>
Đối với XenForo 2, đoạn mã sẽ thay đổi như sau:
Mã:
<xf:js src="http://vnxf.vn/js/jquery.jsticky.js" />
<xf:js>
    $(document).ready(function(){
        $(".p-nav").css({
           width: '100%'
        });
        $(".p-nav").sticky({
            top: 0,
            zIndex: 111
        });
    });
</xf:js>
Nếu file js được up lên hosting của bạn thì link nó sẽ dạng: <xf:js src="{{ base_url('styles/') }}jquery.jsticky.js" />


Code này có thể áp dụng với mọi trang web chứ không riêng gì XenForo, và có thể áp dụng vào cả các khu vực khác, ví dụ banner cuối cùng cột phải của vnxf.vn.

Mấu chốt của code này là đoạn #header, nếu các bạn có thể xem được code html thì đó chính là chữ header trong code menu bên dưới:

Mã:
<div id="header" style="position: fixed; top: 0px; z-index: 11111111;">
id="header" thì ở code jquery trên sẽ là #header
Nếu class="classheader" thì code query trên sẽ là .classheader.

Mã:
<div class="rightside" style="position: static;">
Ví dụ banner cuối cột phải của vnxf.vn là code trên thì code sticky sẽ là:

Mã:
<script type="text/javascript">
    $(document).ready(function(){
        $(".rightside").sticky({
            top: 0,
            zIndex: 11111111
        });
    });
</script>
Chúc các bạn thử nghiệm thành công!

Blue VNXF
 
Sửa lần cuối:

tuna

Thượng Đế
Tham gia
30/01/2017
Bài viết
641
Reaction score
246
quá tuyệt, thank a blue :D
 
  • Like
Reactions: THB

tuna

Thượng Đế
Tham gia
30/01/2017
Bài viết
641
Reaction score
246
khi nào a blue sửa lại cái add on bbcode share lock cho xen1.5 đi ạ, có gì ae đóng ghóp :v
 
  • Like
Reactions: THB

THB

Admin - Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
6,338
Reaction score
3,551
@Blue nhanh như điện. haaa
 

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,043
Reaction score
7,278
lại có cái mới để vọc =))
 
  • Like
Reactions: THB

tuna

Thượng Đế
Tham gia
30/01/2017
Bài viết
641
Reaction score
246
Anh @Blue cho em hỏi nếu muốn nó trượt tới hết #1 là không trượt nữa thì làm thế nào ạ, hiện tại thì em chỉ biết edit để nó trượt tới footer thôi, như vậy thì hơi dài :D
 
  • Like
Reactions: THB

hoanghuutai39

Thượng Đế
Tham gia
29/11/2017
Bài viết
13
Reaction score
5
Thấy có nhiều bạn muốn làm cho Menu top của diễn đàn mình luôn đứng yên khi cuộn trang web xuống nhưng chưa làm được do cách thực hiện quá phức tạp đối với những ai không rành jquery. Hôm nay mình đã tìm ra 1 cách rất đơn giản (đang áp dụng cho VNXF) để làm việc này, đó là sử dụng thư viện jsticky của jquery, các bạn chỉ cần copy đoạn mã bên dưới dán vào template footer là xong.

Mã:
<script type="text/javascript" src="http://vnxf.vn/js/jquery.jsticky.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#header").sticky({
            top: 0,
            zIndex: 11111111
        });
    });
</script>
Code này có thể áp dụng với mọi trang web chứ không riêng gì XenForo, và có thể áp dụng vào cả các khu vực khác, ví dụ banner cuối cùng cột phải của vnxf.vn.

Mấu chốt của code này là đoạn #header, nếu các bạn có thể xem được code html thì đó chính là chữ header trong code menu bên dưới:

Mã:
<div id="header" style="position: fixed; top: 0px; z-index: 11111111;">
id="header" thì ở code jquery trên sẽ là #header
Nếu class="classheader" thì code query trên sẽ là .classheader.

Mã:
<div class="rightside" style="position: static;">
Ví dụ banner cuối cột phải của vnxf.vn là code trên thì code sticky sẽ là:

Mã:
<script type="text/javascript">
    $(document).ready(function(){
        $(".rightside").sticky({
            top: 0,
            zIndex: 11111111
        });
    });
</script>
Chúc các bạn thử nghiệm thành công!

Blue VNXF
AD hướng dẫn khi làm trên xenforo 2 với, xen 2 tìm không ra tamplate footer
 
  • Like
Reactions: THB

tuna

Thượng Đế
Tham gia
30/01/2017
Bài viết
641
Reaction score
246
a @Blue ơi cho em hỏi ạ,
có thể nào làm cho 2 widget trượt đc ko ạ, ví dụ widget 1 trượt tới stopper 1 thì dừng và widget 2 trượt tới stopper 2
 
  • Like
Reactions: THB

phamquangquyen

Thượng Đế
Tham gia
22/01/2018
Bài viết
45
Reaction score
7
Em vào footer template, rồi copy đoạn code này vào cuối phần này

<script type="text/javascript" src="http://vnxf.vn/js/jquery.jsticky.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#header").sticky({
top: 0,
zIndex: 11111111
});
});
</script>

Xong ra ngoài, truy cập em vẫn thấy nó ở phía dưới, nhờ các a trợ giúp với. Em xin cảm ơn!
upload_2018-3-28_15-30-53.png
 
  • Like
Reactions: THB

lanhhuyettu

Thượng Đế
Tham gia
10/03/2015
Bài viết
197
Reaction score
108
Mình thấy cứ sử dụng dòng code này cho tiện :D
Mã:
#navigation
 {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
}
 

Blue

Admin - Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
801
Reaction score
1,253
Update: Code dành cho XenForo 2
 
  • Like
Reactions: THB

datdaik000

Thượng Đế
Tham gia
24/03/2015
Bài viết
1,904
Reaction score
1,455
@Blue sao không dùng luôn CDN đi anh, tiện hơn là up lên host :D
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.4/jquery.sticky.min.js"></script>
 

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. Bình (THB)

Skype chat, instant message

Mr. Tuấn
0988 488 096

Skype chat, instant message

Mr. Bình
0981 06 08 08
kinhdoanh@vnxf.vn

Top Bottom