jquery添加选择器并淡入，但淡出整个标题

Question

基本上，我有我的标题导航，我想淡入，一旦用户向下滚动过某个点。这是一个快速的fiddle。

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

我遇到的问题是

1. 它的淡出，即使我改变淡出使用出现代替了原来的标题。
2. 一旦动画完成并且淡化风格display:none被添加并且内容跳转。

Answer 1

下面是一个示例代码段该做的工作

$(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')) 
 
{ \t 
 
/*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 
 
*/ \t  $('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> 
 
\t 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>