Smooth scroll up menu on scroll up/down

Question

I'm really struggling to get the same header effect of this website http://demo.qodeinteractive.com/bridge13/.

I'm using Wordpress plugin myStickymenu but the results is not what I'm looking for and want to use jquery instead but I have no idea how to do it.

Answer 1

You need to check the 'scroll' event to get the scroll position. If the scroll position is below the height of the header, add a class. The class that gets added will have a different height value which will overwrite the default value.

function init() {
    // Check scroll event
    window.addEventListener('scroll', function(e){
        // Check scroll position
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 300,
            header = document.querySelector("header");
        // If the scroll position is a larger value than the chosen value (shrinkOn)
        if (distanceY > shrinkOn) {
            // Add class "smaller"
            classie.add(header,"smaller");
        } else {
            // Otherwise remove it
            if (classie.has(header,"smaller")) {
                classie.remove(header,"smaller");
            }
        }
    });
}
window.onload = init();

Source: http://callmenick.com/2014/02/18/create-an-animated-resizing-header-on-scroll/