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!
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:
Bài viết liên quan
Bài viết mới