Shrink header height by scrollTop value

Question

Howdey!

Simple problem: I\'ve a fixed header, the height shrinks down based on the window scrollTop-value to the half of its height.

What I have so

Answer 1

Nothing wrong with the if statement. You need to add an else statement for when the initial scroll state is at the bottom. E.g.:

    var header = $('#header'),
    headerH = header.height();

$(window).scroll(function() {
    if ($(this).scrollTop() <= headerH / 2) {
        header.css({
            height: -($(this).scrollTop() - headerH)
        });
    } else {
      header.css({
            height: headerH / 2
        });
    }
}).scroll();