[HỎI] Cố định Navbar theo thanh cuộn trang cho XenForo

Trước em có làm rồi nhưng mà gỡ mất Giờ tìm lại thì không thấy nữa Ai biết làm hoặc làm rồi thì share cho em với Thanks mọi người nhiều nhiều

 

vãi cả demo Tưởng demo site nào có float nav chứ bác vác site bác lên làm gì, quảng cáo trá hình à

 

của bác đây http://vxf.vn/threads/floating-navigation-menu-troi-noi.74/

 

em có dám quảng cáo đâu bác Trước site em có làm rồi mà gỡ ra Cái thanh nav giữ nguyên, khi di chuyển xuống thì nó di chuyển theo chứ không phải cho nó lên top như bác @thanhthanh hướng dẫn. Dù sao cũng cảm ơn 2 bác
p/s: em đã xóa cái "demo" đi rồi nha bác

 

thanks mọi người, em làm được rồi

 

bác share đoạn code của bác cho mình với bác @datdaik000 ! Thanks

 

code đây mình làm theo bài viết này
- Tạo 1 template float_navigation mới với nội dung sau:

Mã:

<script type="text/javascript">
$(function() {
$(window).scroll(function(){
($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) ?
$('#header').stop().animate({'opacity':'0.5'},400).css({'position':'fixed','top':'-{xen:calc '@headerLogoHeight + @headerTabHeight - 25'}px','z-index':'60'}):
$('#header').stop().animate({'opacity':'1'},400).css({'position':'absolute','top':'0px'});
});
$('#header').hover(
function(){ if ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) $(this).stop().animate({'opacity':'1'},400);},
function(){ if ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) $(this).stop().animate({'opacity':'0.5'},400);}
);
});
</script>

- TÌm template page_container_js_body và thêm vào cuối đoạn code sau:

Mã:

<xen:include template="float_navigation" />

End code!

 

Thanks bác rất nhiều nhé, dùng OK cho xen 1.4.3 chứ bác? Update các version Xen có xung đột gì không? bác dùng thấy sao?
(có phải rebuild cache các kiểu hok bác?)
Thân!

 

mình đang dùng Xen 1.4.3 nhé

 

cứ copy code bác add vào Template mới tạo là OK men hả bác?
Sao mình thấy site bác Navibar vẫn ko đứng yên nhỉ?
Thân!

 

OK rồi bác, rất cảm ơn, nếu muốn cái navibar không tự trong suốt trước khi rê chuột thì chỉnh sao OK bác!
Thân!

 

thế thì thay toàn bộ code ở template float_navigation thành thế này là được:

Mã:

<script type="text/javascript">
$(function() {
    $(window).scroll(function(){
        ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) ?
            $('#header').stop().animate({'opacity':'1'},400).css({'position':'fixed','top':'-110px','z-index':'60'}):
            $('#header').stop().animate({'opacity':'1'},400).css({'position':'absolute','top':'0px'});
    });
    $('#header').hover(
        function(){ if ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) $(this).stop().animate({'opacity':'1'},400);},
        function(){ if ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) $(this).stop().animate({'opacity':'1'},400);}
    );
});
</script>

 

RẤT CẢM ƠN BÁC NHIỀU NHÉ!
Chúc site bác luôn phát triển!
CN vui vẻ!
Thân!

 

thanks bác

 

Sorry, lại làm phiền bác, Em làm theo mà hok được bác à!, cái Navibar nó không đứng yên theo code mới bác vừa share:

Em dùng lại code cũ nhưng sửa lại 2 chỗ 0.5 thành 1 thì có OK không bác?

<script type="text/javascript">
$(function() {
$(window).scroll(function(){
($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) ?
$('#header').stop().animate({'opacity':'1'},400).css({'position':'fixed','top':'-{xen:calc '@headerLogoHeight + @headerTabHeight - 25'}px','z-index':'60'}):
$('#header').stop().animate({'opacity':'1'},400).css({'position':'absolute','top':'0px'});
});
$('#header').hover(
function(){ if ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) $(this).stop().animate({'opacity':'1'},400);},
function(){ if ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) $(this).stop().animate({'opacity':'1'},400);}
);
});
</script>

Thân mến!

 

Mình cũng sửa lại mấy chỗ 0.5 thành 1 mà bạn Sửa như bạn cũng ok!
Code trước:

Mã:

<script type="text/javascript">
$(function() {
    $(window).scroll(function(){
        ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) ?
            $('#header').stop().animate({'opacity':'0.5'},400).css({'position':'fixed','top':'-110px','z-index':'60'}):
            $('#header').stop().animate({'opacity':'1'},400).css({'position':'absolute','top':'0px'});
    });
    $('#header').hover(
        function(){ if ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) $(this).stop().animate({'opacity':'1'},400);},
        function(){ if ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) $(this).stop().animate({'opacity':'0.5'},400);}
    );
});
</script>

Code sau:

Mã:

<script type="text/javascript">
$(function() {
    $(window).scroll(function(){
        ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) ?
            $('#header').stop().animate({'opacity':'1'},400).css({'position':'fixed','top':'-110px','z-index':'60'}):
            $('#header').stop().animate({'opacity':'1'},400).css({'position':'absolute','top':'0px'});
    });
    $('#header').hover(
        function(){ if ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) $(this).stop().animate({'opacity':'1'},400);},
        function(){ if ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) $(this).stop().animate({'opacity':'1'},400);}
    );
});
</script>

 

vâng, cảm ơn bác! chắc mắt e muốn đi khám!
Nhờ bác học hỏi thêm được cái code mà e thích
Thân!

 

Mình làm thử thì thấy chuẩn luôn, Thanks bạn đã share