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

Tạo Menu cố định khi cuộn trang với Javascript đơn giản
4.4 (88%) 10 votes
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ế.

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 ad, em làm nhưng không được. Em không hiểu đoạn này ý nghĩa là gì vậy ạ?
    var $filterSpacer = $(”, {
    “class”: “vnkings-spacer”,
    “height”: $filter.outerHeight()
    });
    if ($filter.size())

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

Bạn có thể dùng các thẻ HTML này:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

X

Tạo live chat facebook cho website

Bạn cần tư vấn ?