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

Admin

Administrator
Thành viên BQT
#1
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
 

Từ khóa phổ biến

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top