Headlines
Code làm cho thanh menu nav trượt khi chạm top

Code làm cho thanh menu nav trượt khi chạm top

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.
Code lam cho thanh menu nav trượt khi chạm top
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(&#39;navigation&#39;).className=(offset&gt;104?&#39;fixed&#39;:&#39;&#39;)}}if(window.addEventListener){window.addEventListener(&#39;scroll&#39;,handleScroll,false)}else{window.attachEvent(&#39;onscroll&#39;,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.

Related Articles