Question

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

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

我遇到的问题是

即使我将fadeOut更改为使用出现，它也会淡出原始标题。
动画完成后，它会消失，样式display:none会被添加，内容会跳起来。

Answer 1

以下是完成工作的示例代码段

＆＃13;

$(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');
  });
}

});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Jquery添加选择器并淡入淡出，但淡出整个标头

1 个答案: