jQuery: ScrollTop animate header div class

Question

I have a <div class="header"> which I want to be able to animate after the page has been scrolled 300px. I tried using the following script:

$(body).scroll( function() {
var value = $(this).scrollTop();
if ( value > 300 )
    $(".header").css("height", "220px");
else
    $(".header").css("height", "120px");
});

But nothing seems to be working...

The <div class="header"> is a fixed element at the top of the page, and I wonder if I can add more than one css argument, unlike $("div").css("one css-argument", "value")? (This has been solved)

Edit: I want the header to adjust it's height and font size when the page has been scrolled more than 300px.

Explain what exactly you want to achieve and add jsfiddle.net — Dima Kuzmich
– Dima Kuzmich, Commented Jul 24, 2013 at 12:40

Spokey · Accepted Answer · 2013-07-24 12:45:45Z

3

$(body) is wrong unless body is a variable defined somewhere else.

What you actually should to use though is $(document)

Updated

$(document).scroll(function () {
    var value = $(this).scrollTop();
    if (value > 300) $(".header").css({height:220, fontSize:40});
    else $(".header").css({height:120, fontSize:20});
});

FIDDLE

answered Jul 24, 2013 at 12:45

Spokey

11k2 gold badges31 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery: ScrollTop animate header div class

1 Answer 1

Updated

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Updated

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related