I need to add animation to my header when the user scrolls on the page. Here is the code I am using:
$(document).scroll(function () {
var value = $(this).scrollTop();
if (value > 150) {
$( "body" ).addClass( "scroll" );
$( "header.head" ).animate({top:'-15px'}); }
else {
$( "body" ).removeClass( "scroll" );
$( "header.head" ).animate({top:'0px'}); }
}
});
When the user reaches the Y coordinate of 150, the body receives a new class called ("scroll") and the header moves up by -15px with animation.
However, I am facing an issue where if I try to reset the header position in the else statement like this:
$( "header.head" ).animate({top:'0px'}); }
the script stops working altogether. How can I fix this issue?