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
15,228
Được Like
11,641
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
15,228
Được Like
11,641
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
15,228
Được Like
11,641
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
15,228
Được Like
11,641
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
15,228
Được Like
11,641
ủ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
15,228
Được Like
11,641
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
15,228
Được Like
11,641
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

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

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