Flatsome show header when scrolling up

26 Apr 2020

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 () {
            changeInit: function () {
(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.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.has-transparent #masthead").addClass("nav-dark toggle-nav-dark");
            prevScrollpos = currentScrollPos;
    changeThemeModule.addEffect = function () {
jQuery(document).ready(function () {

Leave a Reply

This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.