CODEWITHSUNDEEP
jquery
atlas24
atlas24

Reputation: 11

Jquery adds selector and fades in but fades out the entire header

Basically, I have my header navigation I want to fade in once the user scrolls down past a certain point. Here is a quick fiddle.

$(window).scroll(function() {
    if ($(document).scrollTop() > 150) {
        $('#main').addClass('appear');
        $('#main').fadeIn(1000);
    } else {
        $('#main').removeClass('appear');
        $('#main').fadeOut(1000);
    }
});

The problems I'm having are

  1. It's fading out the original header even if I change the fadeOut to use appear instead.
  2. Once the animation is done and it fades away style display:none is added and the content jumps up.

Upvotes: 0

Views: 90

Answers (1)

Ananthakrishnan Baji
Ananthakrishnan Baji

Reputation: 1290

Here is a sample snippet which does the job

$(window).scroll(function() {
/*added one more condition(hasClass) because once document scrollTop > 150 this condition will be success again and again but at first we add fixed class so checking this this will avoid this problem*/
if ($(document).scrollTop() > 150 && !$('header').hasClass('fixed')) 
{	
/*here stop will stop any on going animation
first set oppacity to 0 (.css('opa...)) then add fixed class and start animation from 0 to 1
*/	    $('header').stop().css('opacity',0).addClass('fixed').animate({opacity:1});
}
/*when document scrolled back to top (<150) and have the fixed class we added earlier an aditional condition which checks if an animation is not ongoing*/
if ($(document).scrollTop() < 150 && $('header').hasClass('fixed') && !$('header').is(':animated'))
{
/*animate opacity to 0, in the animation complete callback set the opacity to 1 and remove fixed class this will make the beg header to appear again when scrolled to top*/
  $('header').stop().animate({opacity:0},function(){
   $(this).css('opacity','1').removeClass('fixed');
  });
}

});
header {
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    background-color: #d6e0ae;
    padding: 20px 0;
}
header.fixed {
    position: fixed;
    width: 100%;
    top: 0;
    animation-name: fadeIn;
    animation-duration: 1s;
    padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header>
	Header of this page
</header>

<div>Blank contents to make a big scroll </div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div>

Upvotes: 1

Related Questions