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

I've added to #body_parent height to see the scroll, you can delete that row with height after you create the site.

Here is jsfiddle

$(window).on('scroll', function () {
    var scrollTop = $(window).scrollTop();
    if (scrollTop > 50) {
        $('#header_parent').stop().animate({height: "30px"},200);
    }
    else {
         $('#header_parent').stop().animate({height: "50px"},200);   
    }
});

* {
    margin:0 auto;
    padding:0;
}

#header_parent {
    max-width:1250px;
    min-width:750px;
    height:50px;
    background:#000;
    position:fixed;
}

#body_parent {
     height:1200px;   
}

Or HTML

And if you want to set smoothness replace 200 with your number, 200 mean duration in miliseconds.

$('#header_parent').stop().animate({height: "50px"},200);