Bình thường menu website sẽ mất khi cuộn trang web xuống phía dưới, nếu muốn khi cuộn trang web xuống mà vẫn giữ menu trên top thì các bạn có thể thêm 1 đoạn code như sau.
Demo:
Video Demo:
Cách làm:
CSS:
CODE
Chúc bạn thành công
Tags:
Demo:
 |
| Demo menu cố định trên đầu trang khi cuộn trang web - Sticky menu |
Cách làm:
CSS:
<style type="text/css">
#navigation { height:50px; width:100%; max-width:1080px; position:relative; display:block; background:transparent; }
#navigation.fixed { position:fixed; top:-4px; z-index:9999; }
</style>
JAVACRIPT (Trong thẻ body)
<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>
<div id='navigation'> nội dung menu của bạn </div>
Chú ý: Bạn có thể điều chỉnh chiều rộng menu max-width:1080px thành chiều rộng tương ứng trong site của bạn và chiều cao tương ứng top:-4px trong site của bạnChúc bạn thành công
Không có nhận xét nào: