Tạo Menu cố định khi cuộn trang với Javascript đơn giản

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. Trong bài viết này Vnkings sẽ giúp các bạn tự tạo cho mình 1 menu cố định như thế.

– Đầu tiên bạn cần xác định Class hay ID đang chứa menu:

Với Trang Vnkings của mình, class của Menu cần cố định chính là  : head_nav

– Tiếp đến bạn thêm đoạn Javascript này vào bất kỳ đâu trong cặp thẻ body :

<script type="text/javascript">
		jQuery(document).ready(function($) {
			var $filter = $('.head_nav');
			var $filterSpacer = $('<div />', {
				"class": "vnkings-spacer",
				"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>

• Lưu ý đoạn này : var $filter = $(‘.head_nav‘);   Các bạn thay bằng Class tìm được ở bên trên nhé.
• mục đích của đoạn Javascript là khi bạn Cuộn chuột đến thẻ có class .head_nav 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 CSS cho class Fix này giúp Menu luôn ở vị trí đầu của trang :

.head_nav.fix {
  left: 0;
  max-width: 100%;
  overflow: visible;
  position: fixed !important;
  top: 0;
  width: 100%;
  z-index: 1000;
}

Bây giờ các bạn ra trang web của mình và F5 thử xem thành công chưa nhé

Demo https://wordpress.vnkings.com
Hoặc tải ví dụ đơn giản của Vnkings : Tải về

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