Reputation: 14253

How to animate "scrollTop()"?

I use this code for fixed header of my page:

jQuery:

$(window).bind('scroll resize', function() {
    $('#header').css('top', $(this).scrollTop());
});

CSS:

#header{
    position: relative;
}

How can I animate scrollTop()?

Upvotes: 0

Answers (5)

Reputation: 56539

It has to be like

$('#header').scrollTop(value);

atlast

$("#header").animate({ scrollTop: "value in px" })

Upvotes: 0

Reputation: 122026

Try

$('#header').animate({ scrollTop: $(this).scrollTop()}, "slow");

Upvotes: 0

Reputation: 6948

Use :

$('#header').animate({ scrollTop: 0 }, 'slow');

Upvotes: 0

Reputation: 29025

$(window).bind('scroll resize', function() {
    var $this = $(this);
    $('#header').animate({top : $this.scrollTop()});
});

should work

Upvotes: 1

Reputation: 4177

$('#header').animate({'top' : $(this).scrollTop()});

Upvotes: 1