Learn how to build a scroll-up header effect, similar to the Woodmart theme, using any free WordPress theme. This effect hides the header as you scroll down and brings it back when you scroll up, offering a sleek, user-friendly navigation experience. With this guide, you’ll be able to add this feature to your site without needing premium themes or plugins.
How to do this is nicely explained in the accompanying video
header class:
header
header ID:
header
CSS
.header {
position: fixed;
top: 0;
width: 100%;
transition: top 0.3s;
z-index: 1000;
}
.header-placeholder {
display: none; /* Initially hidden */
}
position: fixed;
top: 0;
width: 100%;
transition: top 0.3s;
z-index: 1000;
}
.header-placeholder {
display: none; /* Initially hidden */
}
javascript
(function($){
$(document).ready(function(){
const header = $("#header"); const headerHeight = header.outerHeight();
// Get header height
// Apply padding-top to body to create space dynamically
$('body').css("padding-top", headerHeight + "px");
let lastScrollTop = 0;
$(window).scroll(function() { let scrollTop = $(this).scrollTop(); if (scrollTop > lastScrollTop) {
// স্ক্রল ডাউন
header.css("top", "-110px"); // Hide header
} else {
// স্ক্রল আপ
header.css("top", "0"); // Show header
} lastScrollTop = scrollTop; }); });
})(jQuery);
$(document).ready(function(){
const header = $("#header"); const headerHeight = header.outerHeight();
// Get header height
// Apply padding-top to body to create space dynamically
$('body').css("padding-top", headerHeight + "px");
let lastScrollTop = 0;
$(window).scroll(function() { let scrollTop = $(this).scrollTop(); if (scrollTop > lastScrollTop) {
// স্ক্রল ডাউন
header.css("top", "-110px"); // Hide header
} else {
// স্ক্রল আপ
header.css("top", "0"); // Show header
} lastScrollTop = scrollTop; }); });
})(jQuery);
