Code làm cho thanh menu nav trượt khi chạm top
Mô tả: Đoạn code này sẽ làm cho thanh menu đầu trang (menu nav tự động trượt theo blog/website khi chạm top (đầu trang), hay nói cách khác là: code làm cho thanh menu đầu trang trượt theo blog/website khi chạm top.
Demo: Cuộn trang xuống để thấy hiệu ứng trên ngay trang này.
|
Demo |
Cách thêm CSS và JS để làm cho thanh menu đầu trang (menu nav) trượt khi chạm top:
Bước 1: Thêm đoạn code CSS dưới đây vào trước thẻ ]]></b:skin>
#navigation{height:50px;width:100%;max-width:1080px;position:relative;display:block;background:transparent}#navigation.fixed{position:fixed; top:-4px;z-index:9999}
Bước 2: Thêm đoạn code JS dưới đây vào trước thẻ </body> trong template
<script>function handleScroll(){if(window.XMLHttpRequest){var offset=window.pageYOffset?window.pageYOffset:document.documentElement.scrollTop;document.getElementById('navigation').className=(offset>104?'fixed':'')}}if(window.addEventListener){window.addEventListener('scroll',handleScroll,false)}else{window.attachEvent('onscroll',handleScroll)} </script>
Bước 3: Tìm đến đoạn code chứa menu của bạn và thêm đoạn code như sau:
<div id='navigation'> nội dung menu của bạn </div>
Trong đó:
#navigation.fixed: là giá trị mà thanh menu ngang sẽ nhận khi chạm top
#navigation: là giá trị mà thanh menu ngang sẽ nhận khi chưa chạm top
Bạn có thể chỉnh sửa giá trị phù hợp với giao diện blog/website của bạn.
Chúc bạn thành công.
Đăng nhận xét