Reduce header height after scrolling

Question

I am working on webpage with quite a large header, about 180px. For a better user experience I want to reduce the size of header to about 100px once the user has started scrolling, everything is going smooth so far, however, I can't seem to get the logo to reduce the size of the logo in the header to well, or at least it's background size, any ideas?

http://jsfiddle.net/KQGyu/4/

code as follows -

<script>
$(function(){
    $('#header').data('size','big');
});

$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
    if($('#header').data('size') == 'big')
    {
        $('#header').data('size','small');
        $('#header').stop().animate({
            height:'100px'
        },600);
    }
}
else
{
    if($('#header').data('size') == 'small')
    {
        $('#header').data('size','big');
        $('#header').stop().animate({
            height:'180px'
        },600);
    }  
}
});$(function(){
$('#header').data('size','big');
});

$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
    if($('#header').data('size') == 'big')
    {
        $('#header').data('size','small');
        $('#header').stop().animate({
            height:'100px'
        },600);
    }
}
else
{
    if($('#header').data('size') == 'small')
    {
        $('#header').data('size','big');
        $('#header').stop().animate({
            height:'180px'
        },600);
    }  
}
});
</script>










<script>
$(function(){
$('#logo').data('size','big');
});

$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
    if($('#logo').data('size') == 'big')
    {
        $('#logo').data('size','small');
        $('#logo').stop().animate({
            width:'59px',height:'63px'
        },600);
    }
}
else
{
    if($('#logo').data('size') == 'small')
    {
        $('#logo').data('size','big');
        $('#logo').stop().animate({
            width:'128px',height:'120px'
        },600);
    }  
}
});$(function(){
$('#logo').data('size','big');
});

$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
    if($('#logo').data('size') == 'big')
    {
        $('#logo').data('size','small');
        $('#logo').stop().animate({
            width:'59px',height:'63px'
        },600);
    }
}
else
{
    if($('#logo').data('size') == 'small')
    {
        $('#logo').data('size','big');
        $('#logo').stop().animate({
            width:'128px',height:'120px'
        },600);
    }  
}
});
</script>

Answer 1

Let the CSS do all the work. Encoding animation like this in javascript will lead a variety of kinds of pain.

Your JS should be as simple as this:

$(window).scroll(function(){
    if($(document).scrollTop() > 0) {
        $('#header').addClass('small');
    } else {
        $('#header').removeClass('small');
    }
});

And your CSS sets up the two states, and how it transitions between them:

#header {
    position: fixed;
    top: 0;
    background: #888;
    color: white;
    font-size: 30px;
    height: 60px;
    width: 100%;

    transition: font-size 0.5s, height 0.5s;
    -webkit-transition: font-size 0.5s, height 0.5s;
    -moz-transition: font-size 0.5s, height 0.5s;

}

#header.small {
    font-size: 15px;
    height: 30px;
}

See it work here: http://jsfiddle.net/VLD8G/

Now you can scope anything you want different by the #header.small rule. For example:

#header .logo {
  width: 100px;
  height: 100px;
}

#header.small logo {
  width: 50px;
  height: 50px;
}

Or anything else you want to change. And the beauty is that your JS doesn't have to change at all.

Answer 2

here is vanilla js solution:

1. Add id="header" to header tag
2. Add css

#header {
  height: 100px;
  transition: height .3s ease-in-out
}
.header_small {
  height: 50px;
}

3. Add js

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    const $header = document.getElementById('header');
    if (!$header) {
        return;
    }
    if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
        $header.classList.add('header_small');
    } else {
        $header.classList.remove('header_small');
    }
}