Genesis Sticky Header – Ẩn khi cuộn trang nhưng hiện khi cuộn lên

Trong blog mình có các bài hướng dẫn về sử dụng theme Genesis. Giờ bạn muốn giữ lại header khi cuộn trang, kỹ thuật này gọi là sticky header trong WordPress Genesis

Sticky header là một cách tuyệt vời để cho khách truy cập điều hướng thông qua trang web của bạn khi cuộn vào giữa của trang hoặc bài viết. Nó giúp các độc giả có thể chọn thêm menu về sản phẩm hay dịch vụ của bạn. Nhưng có một vấn đề.

Sticky header luôn hiển thị trên màn hình khi bạn cuộn xuống. Điều này là ok nhưng nếu xem trên mobile, nó sẽ làm ảnh hưởng đến khả năng đọc.

Vậy, giải pháp là gì

Một header thông minh – là ẩn khi bạn cuộn xuống nhưng hiển thị ngay lập tức khi bạn cuộn lên.

Trong bài này mình sẽ hướng dẫn cách làm điều đó, nhưng trước khi sửa tệp bạn hãy thực hiện sao lưu trang web WordPress của một tập tin hiện có, do đó bạn có thể khôi phục khi gặp sự cố.

Thêm những đoạn code sau đây trong tập tin functions.php

//* Smart Header Functions
add_action('wp_footer','geekflare_header_sticky_script');
function geekflare_header_sticky_script()
{
?>
	<script>	
		// Hide Header on Scroll Down but Show when Scroll Up
		var didScroll;
		var lastScrollTop = 0;
		var delta = 5;
		var navbarHeight="";

		jQuery(window).load( function() {
			navbarHeight = jQuery('header.site-header').outerHeight();
			jQuery('body').css('paddingTop',navbarHeight);
		});

		jQuery(window).scroll(function(event){
			didScroll = true;
		});

		setInterval(function() {
			if (didScroll) {
				geekflare_hasScrolled();
				didScroll = false;
			}
		}, 250);

		function geekflare_hasScrolled() 
		{
			var st = jQuery(this).scrollTop();
			
			// Make sure to scroll more than delta
			if(Math.abs(lastScrollTop - st) <= delta)
				return;
			
			// If scrolled down and are past the navbar
			// This is necessary so you never see what is "behind" the navbar.
			if (st > lastScrollTop && st > navbarHeight){
				// Scroll Down
				jQuery('header.site-header').css('top',-navbarHeight).removeClass('shadow');
			} else {
				// Scroll Up
				if(st + jQuery(window).height() < jQuery(document).height()) {
					jQuery('header.site-header').css('top',0).addClass('shadow');
				}
			}
			
			if (st < 15){
				jQuery('header.site-header').css('top',0).removeClass('shadow');
			}
			
			lastScrollTop = st;
		}
	</script>	
<?php
}

Và trong file style.css như dưới đây

/* Smart Header */

header.site-header {
        position: fixed;
        top: 0;
        transition: top 0.3s ease-in-out;
        width: 100%;
        z-index: 9;
        left: 0;
        right: 0;
}

header.site-header.shadow {
        -webkit-box-shadow: 0 0 50px rgba(0,0,0,.15);
        box-shadow: 0 0 50px rgba(0,0,0,.15);
}

body.admin-bar header.site-header{
        top: 32px;
}

@media only screen and (max-width: 780px) 
{
        body.admin-bar header.site-header{
                top: 46px;
        }

}

Lưu tệp và upload lên hosting. Nhớ xóa cache wordpress nếu có và trình duyệt , sau đó làm mới trang để xem kết quả.

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook