No products in the cart.
Fixed headers are fairly common nowadays with big name brands like Facebook, Twitter, Google, LinkedIn, and others using this pattern. It’s easy to carelessly copy them without any thought to improving on the pattern, but perhaps we should rethink that.
More and more people are using mobile phones where screen real estate is a commodity. Even on desktops and tablets applications that get out of the way and let users focus on content feel better. There’s more room to breathe; your eyes don’t feel like squinting.
How can we improve on the fixed header pattern? Here’s a proposal: hide the header as the user scrolls down, and show it again when the user scrolls up. This is not revolutionary. Other apps and websites are already doing this, and it’s pretty sweet. Here’s how you do it.
javascript
Donate
var changeThemeModule;
(function ($) {
"use strict";
changeThemeModule = (function () {
return {
init: function () {
this.changeInit();
},
changeInit: function () {
this.changeShowNavbar();
this.addEffect();
}
}
}());
})(jQuery);
(function ($) {
"use strict";
changeThemeModule.changeShowNavbar =function () {
var prevScrollpos = window.pageYOffset;
$( window ).scroll(function() {
let currentScrollPos = $(window).scrollTop();
// console.log(prevScrollpos + " & " + currentScrollPos);
if ((prevScrollpos > currentScrollPos) && (currentScrollPos !== 0)) {
$("#header.has-transparent").removeClass("transparent nav-dark toggle-nav-dark").css("height","100px");
$("#header").addClass("has-sticky sticky-jump");
$(".header-wrapper").addClass("stuck");
$("#masthead").removeClass("hide-for-sticky");
$("#header.has-transparent #masthead").removeClass("nav-dark toggle-nav-dark");
} else {
$("#header.has-transparent").addClass("transparent nav-dark toggle-nav-dark").css("height","0"); //
$("#header").removeClass("has-sticky sticky-jump");
$(".header-wrapper").removeClass("stuck");
$("#header.has-transparent #masthead").addClass("nav-dark toggle-nav-dark");
}
prevScrollpos = currentScrollPos;
});
}
changeThemeModule.addEffect = function () {
}
})(jQuery);
jQuery(document).ready(function () {
changeThemeModule.init();
});
Admin
Hi, I'm Duc Hanh - a detail-oriented WordPress developer with extensive experience with WordPress plugins and add-ons. Proficient in many other programming languages. Deliver projects done on time.
Author Archives: Admin 