Sticky navigation cố định thanh navigation Xenforo

[PVS]

Sticky navigation (hay Floating Navigation) tức là cố định thanh navigation vào một chổ trên trang web của bạn. Khi kéo trang web xuống dưới, thì thanh navigation vẫn nổi lên trên và cố định ở vị trí trên cùng, giúp người dùng thao tác dễ dàng mà không cần phải kéo trang web lên lại. Có nhiều addon giúp thực hiện việc này, có cả những addon Premium với nhiều chức năng hơn nhưng mình thấy không cần, trong bài này mình sẻ hướng dẫn các bạn tạo Sticky navigation (Floating Navigation) bằng cách chỉnh sửa các template, rất đơn giản, không cần dùng addon gì cả.

​

Bắt đầu thôi:
- Thêm vào template navigation.css đoạn css sau:

/*Sticky nav by vnxf.vn*/
#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;}
#navigation.sticky:hover { opacity: 1;}
#navigation.sticky  .navTabs { -webkit-border-radius: 0px; border-radius: 0px; }
#navigation.sticky .navTabs .navTab.selected .tabLinks { -webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px; -webkit-box-shadow:  0px 6px 2px -4px rgba(0, 0, 0, 0.4); box-shadow:  0px 6px 2px -4px rgba(0, 0, 0, 0.4)  }
#navigation.sticky .navTabs .navLink .itemCount {top: auto; bottom: -12px;}
#navigation.sticky .navTabs .navLink .itemCount .arrow { bottom: auto; top: -3px; border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FF0000; border-width: 3px; border-style: none solid solid;}
#navigation.sticky .navTabs .Popup.PopupContainerControl.PopupOpen .navLink .itemCount {position: inherit; padding: 2px 4px;}
#navigation.sticky .navTabs .Popup.PopupContainerControl.PopupOpen .navLink .itemCount .arrow {display: none;}
.footerLinks a.topLink {
display: none;
}
/* End sticky nav by vnxf.vn*/

- Sau đó thêm vào template page_container_js_head đoạn js sau:

<!-- Sticky nav by vnxf.vn-->
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
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'}</xen:if>) {
$("#navigation").addClass("sticky");
} else {
$("#navigation").removeClass("sticky");
}
});
});
</script>
<!-- End sticky nav by vnxf.vn -->

Lưu lại vào hưởng thành quả thôi.

Nguồn: kyniem.org​

 

[anhtuan_vh3]

Mình muốn ô tìm kiếm cố định theo luôn thì làm sao nhỉ?

 

[tuna]

giống bạn ở trên, có cách nào dính luôn cái search bar ko ạ

 

[tuna]

...

 

[PVS]

xin nhờ coder trợ giúp ^^, anh @Blue

 

[secpol]

Mình thì lại muốn lấy riêng cái header và navbar thôi thì làm như thế nào nhỉ? Áp dụng cho style mặc định.

 

[tuna]

Mình thì lại muốn lấy riêng cái header và navbar thôi thì làm như thế nào nhỉ? Áp dụng cho style mặc định.

nói rõ hơn đi bạn

 

[secpol]

nói rõ hơn đi bạn

Ý mình là muốn lấy riêng cái PageNav và Header thôi. Chỉ riêng cái phần khoanh đỏ.