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.

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.