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

  • Thread starter Thread starter PVS
  • Ngày gửi Ngày gửi

PVS

Super Moderator
Thành viên BQT
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​
 
Được quan tâm
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
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
Back
Top