Hướng dẫn cố định menu khi cuộn trang trong wordpress


Hướng dẫn cố định menu khi cuộn trang trong wordpress

24 Likes Comment

Tạo menu sẽ cố định khi khách truy cập cuộn xuống phía dưới màn hình giúp cho khách dễ dàng di chuyển không  mất thời gian để cuộn lên đầu trang để nhìn thấy menu.
Bài viết này mình xin hướng dẫn các bạn sử dụng 2 cách:
Cách 1: Sử dụng plugin để tạo.
Đầu tiên ta tiến hành cài đặt plugin Sticky Menu (or Anything!) on Scroll hoặc bạn có thể tải tại đây

Download Sticky Menu

Khi cài đặt xong plugin ta kích hoạt và tiến hành cấu hình plugin

Ta chỉ quan tâm đến Sticky Element: ở đây là CSS ID hoặc Class của menu ta cần cố định.
Để xác định được ID(Class) cần cố định ta click chuột phải chỗ cần cố định rồi chọn kiểm tra(Inspect) trên trình duyệt để xác định ID(Class) cần cố định, ID cố định của mình là masthead lứu ý nhớ thêm # vào trước nhé: #masthead.
Như vậy là phần cố định menu bằng plugin đã xong.
Cách 2: Sử dụng Javascript và css để cố định không cần plugin.
Cũng như cách 1 ta cần xác định ID hoặc Class của menu cần cố định sau đó thêm đoạn Javascript vào bất kỳ đâu trong thẻ body

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

Chú ý đoạn này : var $filter = $(‘.site-header’); Các bạn thay bằng ID(Class) của bạn cho phù hợp nhé.
Tiếp theo bạn cần thêm CSS cho ID(Class) Fix để giúp Menu luôn ở vị trí đầu của trang:

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

Bây giờ lưu lại và quay trở lại trang website của mình để tận hưởng kết quả thôi.
Chúc các bạn thành công.

 

Bài viết liên quan

Chủ bút: Lê Tú

Blog mình lập ra nhằm mục đích viết lại những gì mình đã tìm hiểu, đã đọc được trên mạng, qua bạn bè để mai mốt cần tìm khỏi quên, cũng như chia sẻ những thứ mà mình đã sưu tầm được. Vì mình không phải chuyên lập trình website nên một số bài viết còn sai sót mong mọi người góp ý.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *