jQuery on scroll header effect

Question

Hi guys

I would like to make a jquery on scroll header effect . I've just added some changes in to the code but it's not working they way I want. I want to make the effect - when I scroll down a bit pixel for the header to change the height to small. Or show the hidden header with other styles

So when scrolling the normal header to slide up and then show the hidden header like slide down... I've spent much time on this but it's only working with fadeIn and fadeOut

 jQuery code

 $(function() {
    $('.header-small').hide();
    var header = $(".header-small");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if (scroll >= 200) {
            $('.header-small').show();


            header.removeClass('header').addClass("header-small");
            $('.header-small').addClass('animated fadeInUp'), {duration:500};


        } else {
            $('header').show();
            $('.header-small').hide();
            header.removeClass("header-small").addClass('header');
            $('header').addClass('animated fadeInDown');
        }
    });
});

Working demo here

Please could somebody help me with this?

Thanks

Answer 1

You may try using callbacks,

$(function() {
        $('.header-small').hide();
        var bar = $('header');
        var top = bar.css('top');
        $(window).scroll(function() {
            if($(this).scrollTop() > 50) {
                bar.stop().animate({'top' : '0px'}, 200);
                $('.header-small').slideDown('slow',function(){

                    $('header').slideUp('slow');});
            } else {
                bar.stop().animate({'top' : '20px'}, 200);
                    $('header').slideDown('slow');
                    $('.header-small').slideUp('slow');
            }
        });
    });

And also some styling for cleaner effect

header
{
    position:absolute;
    width:400px;
    height:200px;
}

Jsfiddle updated example

Answer 2

Why not just addClass and do the rest in CSS?

$(window).scroll(function() {
  if($(window).scrollTop() > 50) {
    $('header').addClass('header-small');
  }
  else {
    $('header').removeClass('header-small');
  }
});

Answer 3

jsFiddle DEMO

$(function () {
    $('.header-small').hide();
    var bar = $('header');
    var top = bar.css('top');
    $(window).scroll(function () {
        if ($(this).scrollTop() > 50) {
            bar.stop().animate({
                'top': '0px'
            }, 200);
            $('header').slideUp('fast', function () {
                $('.header-small').slideDown('slow');
            });
        } else {
            bar.stop().animate({
                'top': '20px'
            }, 200);
            $('.header-small').slideUp('fast', function () {
                $('header').slideDown('fast');
            });
        }
    });
});