Can anyone help me with my jsfiddle? I have a sticky header that shrinks when scrolling down, along with a png overlay that also shrinks. However, the current animation looks bad. I tried using fadeIn with jQuery but it's not working as expected.
How can I shrink the header while fading out the image more smoothly? Thanks
$(window).scroll(function() {
if ($(this).scrollTop() > 50){
$('#header').addClass("sticky");
$('#logo').addClass("sticky");
}
else{
$('#header').removeClass("sticky");
$('#logo').removeClass("sticky");
}
});