Hướng Dẫn Tạo Menu Cố Định Khi Cuộn Trang Bằng Javascript

Menu cố định khi cuộn trang hay còn gọi là Floating menu giúp website của bạn chuyên nghiệp và đẹp mắt hơn.

Để tạo menu cố định khi scroll chuột các bạn cần thêm đoạn javscript sau vào code:

Thay cng-fixed bằng tên id chứa menu bạn cần cố định.

Mã:

<script type="text/javascript">
        jQuery(document).ready(function($) {
            var $filter = $('#cng-fixed');
            var $filterSpacer = $('<div />', {
                "class": "vnovernight",
                "height": $filter.outerHeight()
            });
            if ($filter.size())
            {
                $(window).scroll(function ()
                {
                    if (!$filter.hasClass('fix') && $(window).scrollTop() > $filter.offset().top)
                    {
                        $filter.before($filterSpacer);
                        $filter.addClass("fix");
                    }
                    else if ($filter.hasClass('fix')  && $(window).scrollTop() < $filterSpacer.offset().top)
                    {
                        $filter.removeClass("fix");
                        $filterSpacer.remove();
                    }
                });
            }
        });
    </script>

Mục đích của đoạn Javascript là khi bạn Cuộn chuột đến thẻ có class .cng-fixed thì nó sẽ thêm 1 class nữa có tên là Fix

Lúc này hãy thử kiểm tra code khi cuộn trang đã thêm Class Fix

Tiếp theo bạn cần tạo CSS cho class Fix này giúp Menu luôn ở vị trí cố định khi di chuyển chuột.

Lưu ý là nhớ thay cng-fixed bằng tên id của bạn.

Mã:

#cng-fixed.fix {
  max-width: 100%;
  overflow: visible;
  position: fixed !important;
  top: 10px;
  width: 100%;
  z-index: 1000;
}

Demo:

Diễn Đàn Kiếm Tiền Trên Mạng

Mọi vấn đề cần hỗ trợ hãy comment bên dưới.

Chúc các bạn thành công!