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>