sticky nav menu - cố định menu khi cuộn chuột xuống
Nhìn demo có thể thấy khi cuộn chuột xuống thì menu cố định ở trên.
Đầu tiên các bạn cho code menu của các bạn bao quanh bởi <sticknav>
Ví dụ như này là menu của hotrofm
Code:
<sticknav>
(Để code menu của các bạn ở đây) ( của hotrofm sẽ là <nav>.....</nav>)
</sticknav>
Tiếp theo cho code này vào head hoặc footer.
Code:
<style type="text/css">
sticknav {
height: 30px;
width: 100%;
margin-right: 0px;
margin-left: 0px;
left: 0px;
right: 0px;
position: relative;
z-index: 9999;
}
.fixed { position:fixed;}
</style>
<script type="text/javascript">
$(document).ready(function() {
var aboveHeight = 400;
$(window).scroll(function(){
if ($(window).scrollTop() > aboveHeight){
$('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
} else {
$('sticknav').removeClass('fixed').next().css('padding-top','0');
}
});
});
</script>
Trong code scrip trên có đoạn var aboveHeight = 400; nghĩa là khi cross chuột quá 400 thì nó thực hiện sticknav .
Thanh thành var aboveHeight = $('header').outerHeight(); Nếu khi cross quá head sẽ thực hiện
Thanh thành var aboveHeight = $('body').innerHeight(); Nếu khi cross đến body hoặc tùy cái gì mà mình thích
code có thể phù hợp với 1 số style và không hợp với 1 số style. vì vậy ai dùng thì chỉnh lại css cho hợp lý theo ý mình.
Tags: #code #forumotion #blogger