Diễn Đàn Hỗ Trợ FM
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.


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

Tác giả: - vào lúc:
Admin
Bài viết : 431
Points : 820
Like : 120
Punbb
Quản trị
Status : test
AdminACP
12/3/2016, 16:03
#1

sticky nav menu - cố định menu khi cuộn chuột xuống


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

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>

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

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