CODEWITHSUNDEEP
jquery
fngryboi
fngryboi

Reputation: 64

jQuery: ScrollTop animate header div class

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.

Upvotes: 0

Views: 629

Answers (1)

Spokey
Spokey

Reputation: 10994

$(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

Upvotes: 3

Related Questions