vnfaster@gmail.com

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ế.

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ế.

Tạo menu cố định khi cuộn trang

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

Tạo menu cố định khi cuộn trang

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

Tạo menu cố định khi cuộn trang

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!

Bài liên quan

  1. Chào, mình làm theo thì không vấn đề gì, chạy mượt lắm, nhưng có 2 phát triển nhỏ mong bạn hướng dẫn:
    1. thêm chức năng chỉ cho cuộn xuống thì FIX, nhưng cuộn lên thì không Fix menu nữa (chỉ cho 1 chiều)
    2. thêm các thành phần khác (Home / Swith / ..) mà không phải mặc định của menu, thì phải làm sao?

    mong giúp – cám ơn bạn nhé !

Bình luận bài viết

Bạn cần đăng nhập để bình luận.

Audio truyện full

phàm nhân tu tiên audio

vũ thần chúa tể audio

thế giới hoàn mỹ audio

vô thượng thần đế audio

vạn cổ thần de audio

tiên nghịch audio