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>

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.