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

    Gửi bài mới  Trả lời chủ đề này

  • Admin

    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

Thông tin tác giả
avatar
ACP
Bài viết :
331
Points :
641
Like :
107
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết