Help Sticky navigation xenforo, hiện thanh menu khi kéo chuột lên

lacluoc

Corporal
Mình thấy nhiều hướng dẫn cố định thanh navigation nhưng thấy cố định mãi rất vướng màn hình. mình muốn hỏi làm thế nào để thanh navigation hiện ra khi KÉO CHUỘT LÊN còn khi kéo xuống thì nó mất. Demo giống trang này http://abvtv.net
Cảm ơn!


nav-gif.13543.html
Demo online style default: http://demo.nhatkythuthuat.com/threads/7/ Sẵn nghe bài nhạc luôn monkey~~
Tempalte: page_container_js_body
Mã:
<!-- Sticky nav by Bcat95-->
<script type="text/javascript">
var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       $("#navigation").removeClass("sticky");
   } else {
     if ($(window).scrollTop() > <xen:if is="!{$visitor.user_id}">{xen:calc '@headerLogoHeight + @headerTabHeight - 20'}</xen:if><xen:if is="{$visitor.user_id}">{xen:calc '@headerLogoHeight + @headerTabHeight - 20'}</xen:if>) {
        $("#navigation").addClass("sticky");
    } else {
        $("#navigation").removeClass("sticky");
    }
   }
   lastScrollTop = st;
});
</script>
<!-- End sticky nav by Bcat95 -->

Template EXTRA.css
Mã:
#navigation { -webkit-transition: opacity 1s ease; -moz-transition: opacity 1s ease; -ms-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease;}
#navigation.sticky { position:fixed; top:0px; left:0px; right: 0; z-index:7499;}

 
Sửa lần cuối bởi điều hành viên:
Mã:
if(uix.stickyNavigationMaxWidth == 0){uix.stickyNavigationMaxWidth = 999999}
if(uix.stickyNavigationMaxHeight == 0){uix.stickyNavigationMaxHeight = 999999}
if(uix.stickyNavigationPortraitMaxWidth == 0){uix.stickyNavigationPortraitMaxWidth = 999999}
if(uix.stickyNavigationPortraitMaxHeight == 0){uix.stickyNavigationPortraitMaxHeight = 999999}
uix.stickyItems['#navigation'] = {normalHeight:parseInt('46'), stickyHeight:parseInt('56')}
var subElement = null;
//if tablinks are visible
uix.stickyItems['#navigation'].options = {subElement: '#navigation .tabLinks', subNormalHeight: parseInt('46'), subStickyHeight: parseInt('56'), subStickyHide: 1 == 1 , scrollSticky: uix.stickyGlobalScrollUp }
 
Sửa lần cuối bởi điều hành viên:
Mã:
if(uix.stickyNavigationMaxWidth == 0){uix.stickyNavigationMaxWidth = 999999}
if(uix.stickyNavigationMaxHeight == 0){uix.stickyNavigationMaxHeight = 999999}
if(uix.stickyNavigationPortraitMaxWidth == 0){uix.stickyNavigationPortraitMaxWidth = 999999}
if(uix.stickyNavigationPortraitMaxHeight == 0){uix.stickyNavigationPortraitMaxHeight = 999999}
uix.stickyItems['#navigation'] = {normalHeight:parseInt('46'), stickyHeight:parseInt('56')}
var subElement = null;
//if tablinks are visible
uix.stickyItems['#navigation'].options = {subElement: '#navigation .tabLinks', subNormalHeight: parseInt('46'), subStickyHeight: parseInt('56'), subStickyHide: 1 == 1 , scrollSticky: uix.stickyGlobalScrollUp }
cái này chỉ là phần nổi, còn các biến ui.x thì nó nén hết lại rồi :D
 
Ý bạn chủ thớt là khi kéo scroll lên thì nó hiện ra, kéo xuống thì nó k hiện. Còn demo này kéo xuống mình thấy nó vẫn hiện mà :)
kéo xuống ko hiện, chỉ kéo lên mới hiện mà bạn?
Mình vừa xem demo xong?
 
kéo xuống ko hiện, chỉ kéo lên mới hiện mà bạn?
Mình vừa xem demo xong?
Bạn xem lại demo của chủ thớt đưa, ở đây kéo cái page đi lên thì nó k hiện ra, kéo cái page đi xuống thì nó sẽ hiện ra bạn ơi!
Link demo của bạn @bcat95 thì kéo page lên thì nav hiện ra và ngược lại.
 
Nếu mấy bác thấy style k phải style xen mặc định là lúc đấy đang dev style khác chứ k phải style demo :)
Demo online style default mình đã ghi rõ ở đây rồi. Vì site dùng để test nên k cố định style khi vào web :D headbang~~
chắc bác ấy quên rofl~~
 
Thanks
Cái này dành riêng cho style bác đnag dùng
Mã:
<!-- Sticky nav by Bcat95-->
<script type="text/javascript">
var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       $("#navigation").removeClass("sticky");
   } else {
     if ($(window).scrollTop() > <xen:if is="!{$visitor.user_id}">{xen:calc '@headerLogoHeight + @headerTabHeight - 20'}</xen:if><xen:if is="{$visitor.user_id}">{xen:calc '@headerLogoHeight + @headerTabHeight - 20'}</xen:if>) {
        $("#header").addClass("sticky");
    } else {
        $("#header").removeClass("sticky");
    }
   }
   lastScrollTop = st;
});
</script>
<!-- End sticky nav by Bcat95 -->

Mã:
#header{ -webkit-transition: opacity 1s ease; -moz-transition: opacity 1s ease; -ms-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease;}
#header.sticky{
    position: fixed !important;
    top: 0px;
    left: 0px;
    right: 0;
    z-index: 7499;
}
kéo xuống nó ko tự ẩn cậu ạ, nó chỉ tự ẩn khi kéo lần đầu, nếu load trang kéo lần 1 thì ok nó ẩn, nhưng sau đó kéo tiếp lần 3 thì nó thành hiện cố định luôn
 
mò hoài không ra bác ạ, css thấy vẩn chạy nhưng trình vẩn gà nên không biết xoay xở thế nào!
demo: pistudio.vn
e inbox bác acc admin rồi nhờ bác coi hộ e tí, sửa những chổ nào ghi chú lại hộ e tẹo để e tập ngâm cứu nha bác! cám ơn bác nhiều!
 
Bác @bcat95 ơi, mình làm theo mà nó lúc kéo xuống thì nó cũng cố định luôn, bạn xem giúp mình nhé. Site mình vnaccounting.net

Mình muốn khi kéo lên là cố định luôn cả logo nha bác

Cảm ơn bác
 
Back
Top