changing div height on scroll

Question

What I want is a div at the top (header) that will be at maximum height (50px) when you first load the page, and when you\'re scrolling down the page I want the height to sm

Answer 1

You can do this without jQuery.

var header = document.getElementById("header_parent");

window.onscroll = function(e) {
    if(window.scrollY) {
        if(window.pageYOffset > 50) {
            header.style.height = 30;
        } else {
            header.style.height = 50;
        }
    }
}

You could also toggle class names inside the if block instead of setting the height explicitly.