How to run a set of animations after scrolling 100px down the page?
I am trying to make a website header become sticky, animate the logo img
smaller, and reposition the navigation links once the user scrolls 100px
down the page.
Here is what I currently have:
$(document).ready(function() {
$(window).scroll(function() {
if ($(document).scrollTop() > 100) {
$('#header').addClass('sticky');
$('#logo img').animate({'width':'200px','top':'-10px'});
$('#header').animate({'height':'70px'});
$('#menu_btns ul li').animate({'top':'-24px','left':'-90px'});
$('#store_links').animate({'top':'-20px','left':'0px'});
}
else {
$('#header').removeClass('sticky');
$('#logo img').animate({'width':'287px','top':'0px'});
$('#header').animate({'height':'116px'});
$('#menu_btns ul li').animate({'top':'0px','left':'0px'});
$('#store_links').animate({'top':'0px','left':'0px'});
}
});
});
The problem I'm having is after scrolling down and everything animates,
after going back up none of the "else" animations execute.
No comments:
Post a Comment