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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,827
Được Like
11,118
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ế!

f271115c061e275e492a9ef01953183b.png

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

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 :
Mã:
<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:
Mã:
.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

Thượng Đế
Tham gia
08/04/2015
Bài viết
73
Được Like
35
sao mình làm như hướng dẫn thì sau đó 2 thanh tab vs tablink nó chồng lên nhau nhỉ?
 
  • Like
Reactions: THB

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,827
Được Like
11,118
bạn cho cái hình demo đi ^^
 

anhtuan_vh3

Thượng Đế
Tham gia
08/04/2015
Bài viết
73
Được Like
35
trước và sau khi áp dụng là ntnày đây bạn.
Screenshot from 2015-05-12 09:17:04.png
Screenshot from 2015-05-12 09:19:21.png
 

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,827
Được Like
11,118
tình hình là bạn thay thiếu code rồi, bạn đọc kỹ bài mình post nha ^^
 
  • Like
Reactions: THB

anhtuan_vh3

Thượng Đế
Tham gia
08/04/2015
Bài viết
73
Được Like
35
mình copy toàn bộ mà, đâu phải tự gõ đâu :D
 
  • Like
Reactions: THB

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,827
Được Like
11,118
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">
 
  • Like
Reactions: THB

anhtuan_vh3

Thượng Đế
Tham gia
08/04/2015
Bài viết
73
Được Like
35
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">
 
  • Like
Reactions: THB

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,827
Được Like
11,118
ủa sao mình làm có bị gì đâu @@

Untitled.png
 
  • Like
Reactions: THB

anhtuan_vh3

Thượng Đế
Tham gia
08/04/2015
Bài viết
73
Được Like
35
lạ nhỉ, có bao giờ do addon Nodes as Tabs gây lỗi ko nhỉ?
 
  • Like
Reactions: THB

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,827
Được Like
11,118
hông rõ :))
 
  • Like
Reactions: THB

anhtuan_vh3

Thượng Đế
Tham gia
08/04/2015
Bài viết
73
Được Like
35
mình muốn ô tìm kiếm cố định theo luôn cùng navbar thì làm sao nhỉ? @PVS
 

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,827
Được Like
11,118
mình cũng không rành code nữa nên chịu
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom