[Code] sticky nav menu – cố định menu khi cuộn chuột xuống

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

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ởiVí dụ như này là menu của hotrofmTiếp theo cho code này vào head hoặc footer.Trong code scrip trên có đoạnnghĩa là khi cross chuột quá 400 thì nó thực hiện sticknav .Thanh thànhNếu khi cross quá head sẽ thực hiệnThanh thànhNếu khi cross đến body hoặc tùy cái gì mà mình thíchcode 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.