Cố định Navbar theo thanh cuộn trang cho XenForo

[PVS]

Mặc định của XenForo thanh Navigation bar sẽ nằm yên một chỗ khi bạn kéo scroll bar (thanh cuộn trang) lên hay xuống . Nếu như bạn muốn làm cho thanh Navbar cố định theo thanh scroll bar thì bài viết này sẽ hướng dẫn bạn làm như thế!

​

P/s :Chọn Giao diện di động rồi kéo thanh Scroll bar lên xuống để xem nhé

Cách làm như sau :
Bạn vào Admincp -> Appearance -> Templates -> Navigation -> Thay toàn bộ những nội dung bên trên thẻ <div class="navTabs"> bằng đoạn này :

<xen:edithint template="navigation.css" />
<script>
$(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll >= 172) {
        $('navtop').addClass('fixed');
        $('.wrapper section').each(function(i) {
            if ($(this).position().top <= windscroll - 172) {
                $('navtop a.active').removeClass('active');
                $('navtop a').eq(i).addClass('active');
            }
        });

    } else {

        $('navtop').removeClass('fixed');
        $('navtop a.active').removeClass('active');
        $('navtop a:first').addClass('active');
    }

}).scroll();
        </script>
<div id="navigation" class="pageWidth {xen:if $canSearch, withSearch}">
    <div class="pageContent">
        <navtop>

Tiếp đến bạn Tab qua Navigation.css . Thêm đoạn này trên cùng:

.fixed {
    position: fixed;
    top: 0px;
    width: 100%;
    margin: auto;
    left: 0;
    z-index: 99999;
}

Oke, bây giờ F5 lại trang để xem thành quả nhé . Chúc các bạn thành công!

Nguồn: itonline.vn​

 

[anhtuan_vh3]

sao mình làm như hướng dẫn thì sau đó 2 thanh tab vs tablink nó chồng lên nhau nhỉ?

 

[PVS]

bạn cho cái hình demo đi ^^

 

[anhtuan_vh3]

trước và sau khi áp dụng là ntnày đây bạn.

 

[PVS]

tình hình là bạn thay thiếu code rồi, bạn đọc kỹ bài mình post nha ^^

 

[anhtuan_vh3]

mình copy toàn bộ mà, đâu phải tự gõ đâu

 

[PVS]

mình biết là copy nhưng làm có đúng hay không ấy: Thay toàn bộ những nội dung bên trên thẻ <div class="navTabs">

 

[anhtuan_vh3]

mình biết là copy nhưng làm có đúng hay không ấy: Thay toàn bộ những nội dung bên trên thẻ <div class="navTabs">

thì đúng mà, thay toàn bộ nội dung bên trên thẻ <div class="navTabs">

 

[PVS]

ủa sao mình làm có bị gì đâu @@

 

[anhtuan_vh3]

lạ nhỉ, có bao giờ do addon Nodes as Tabs gây lỗi ko nhỉ?

 

[PVS]

hông rõ )

 

[anhtuan_vh3]

mình muốn ô tìm kiếm cố định theo luôn cùng navbar thì làm sao nhỉ? @PVS

 

[PVS]

mình cũng không rành code nữa nên chịu