Show hide Header on scroll - OoohBoi video tutorial

gistfile1.txt

<script>
"use strict";
OB_ready(OB_doWhenReady);

function OB_doWhenReady() {
    // localize everything
    var ooohBoi = window.ooohBoi || {};
    // local scope variables
    ooohBoi.prev_scroll_pos = window.scrollY || document.body.scrollTop;
    ooohBoi.cur_scroll_pos;
    ooohBoi.scroll_direction = 'init';
    ooohBoi.prev_scroll_direction = 0;
    ooohBoi.header = document.querySelector('#show-hide-header'); // header ID
    ooohBoi.header_pos = {
        top: ooohBoi.header.offsetTop,
        left: ooohBoi.header.offsetLeft,
    };
    ooohBoi.header_height = OB_outerHeight(ooohBoi.header);
    // show-hide header with ease/transition
    ooohBoi.header.style.transition = 'all 0.3s ease';
    // update header height on window resize
    ooohBoi.updateHeaderHeight = function() {
        ooohBoi.header_height = OB_outerHeight(ooohBoi.header);
    }
    // listen "scroll" event and decide what to do
    ooohBoi.checkScroll = function() {
        ooohBoi.cur_scroll_pos = window.scrollY || document.body.scrollTop;

        if (ooohBoi.cur_scroll_pos > ooohBoi.prev_scroll_pos) ooohBoi.scroll_direction = 'down';
        else if (ooohBoi.cur_scroll_pos < ooohBoi.prev_scroll_pos) ooohBoi.scroll_direction = 'up';

        if (ooohBoi.scroll_direction !== ooohBoi.prev_scroll_direction) ooohBoi.toggleHeader(ooohBoi.scroll_direction, ooohBoi.cur_scroll_pos);
        ooohBoi.prev_scroll_pos = ooohBoi.cur_scroll_pos;
    }
    // add or remove class based on the scrolling direction
    ooohBoi.toggleHeader = function(scroll_direction, scroll_current) {
        if (scroll_direction === 'down' && scroll_current > ooohBoi.header_height) {
            OB_addClass(ooohBoi.header, 'im-hidden'); // for styling
            ooohBoi.header.style.top = -1 * ooohBoi.header_height + "px";
            ooohBoi.prev_scroll_direction = scroll_direction;
        } else if (scroll_direction === 'up') {
            OB_removeClass(ooohBoi.header, 'im-hidden');
            ooohBoi.header.style.top = ooohBoi.header_pos.top + "px";
            ooohBoi.prev_scroll_direction = scroll_direction;
        }
    }
    // listen "scroll" and "resize" window events
    window.addEventListener('scroll', ooohBoi.checkScroll);
    window.addEventListener('resize', ooohBoi.updateHeaderHeight);
}

function OB_outerHeight(el) {
    var height = el.offsetHeight;
    var style = getComputedStyle(el);
    height += parseInt(style.marginTop) + parseInt(style.marginBottom);
    return height;
}

function OB_addClass(el, className) {
    if (el.classList) el.classList.add(className);
    else {
        var current = el.className,
            found = false;
        var all = current.split(' ');
        for (var i = 0; i < all.length, !found; i++) found = all[i] === className;
        if (!found) {
            if (current === '') el.className = className;
            else el.className += ' ' + className;
        }
    }
}

function OB_removeClass(el, className) {
    if (el.classList) el.classList.remove(className);
    else el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}

function OB_ready(fn) {
    if (document.readyState != 'loading') fn();
    else if (document.addEventListener) document.addEventListener('DOMContentLoaded', fn);
    else {
        document.attachEvent('onreadystatechange', function() {
            if (document.readyState != 'loading') fn();
        });
    }
}
</script>

Thanks a lot!!

Many thanks for this one ! Love your video. Everything is straight to the point and it's really nice to follow.

Thanks Buddy

Excellent code! I'm using this for my interior pages with nice effect.

However, I need something different on the home page.

How would this need to change if the menu is in an inner section vs. an Elementor header? My menu, which has a transparent background, shares needs to share the first content section which has a background image. That's working well, but I can't get your scroll effect to work.

The inner section that contains the menu uses the HTML tag "header" and has the class "show-hide-header". Inspection reveals that your code, which is inside one of the inner section's columns, successfully finds the html element in the doc. It even updates its inline styles upon scroll. But there's no change in the visibility. The menu section doesn't disappear on scroll down.

In particular, I notice that on interior pages where I use the Elementor header to contain the menu, the top value switches from 32px to -350px on scroll down and the menu disappears. On the home page, however, where I'm using the inner section and not the Elementor header, the top value, as well as all other inline styles set by the code, is absent on page load and switches to 32px on scroll down.

So this seems to be a minor issue of initialization. Any suggestions?

Thanks!

Thank you soo much!

Hi, Thank you for the code but it shows server error 403. While updating the page after pasting this code in the HTML element. Any solutions? I don't have any security plugins activated.

Works perfectly, thank you so much

Thanks bro

thank you a lot....

Hi There,
I really like the show hide header and I have used it before. However, I have just tried to implement it on a new site and it works fine on desktop but not on mobile (iPhone). Any suggestions

It is on overland-europe.com/de/

Thanks for your help.

Thanks sir

Thank you so much! It's work!

Hi,
First thank for the video and code.
I've applied it to Latittudes.com ( https://www.latittudes.com/ ) , but when i scroll up the header doesn't scroll down to initial position.

Thanks for your help.

Great code, works really well. Except for one bug: when resizing the browser width to a smaller size and then back to a larger size, the header width stays at the small size and doesn't resize back to the larger width.