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

  2. 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ó 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>

Bình luận của bạn sẽ được hiển thị sau khi kiểm duyệt. Cảm ơn bạn đã để lại 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

Truyện ebook dịch full

truyện audio

phàm nhân tu tiên audio

tiên nghịch audio

vũ thần chúa tể audio

thế giới hoàn mỹ audio

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

van co than de

bảo hộ tộc trưởng phe ta audio

sư huynh ta quá ổn trọng audio

quỷ bí chi chủ audio

thiên cơ lâu: bắt đầu chế tạo âm hiểm bảng audio

tối cường trang bức đả kiểm hệ thống audio

tu chân tứ vạn niên audio

thê vi thượng

truyện teen

yêu thần ký

con đường bá chủ

thần mộ

đế bá

tinh thần biến

thần ấn vương tọa

đấu la đại lục 5