滚动时在标题上淡入淡出徽标

问题描述：

我几乎完成了我想要做的事情，但出现了一个小故障，并想知道是否有人可以看到什么是错误的。当我第一次浏览页面时，CSS动画会闪烁。滚动时在标题上淡入淡出徽标

我试图动画曾经滚过的标题横幅上我的乐队的网站标志和横幅Here's my website

我希望它在菜单（” .logo‘）上的小标识褪色（’.slides “），并退回到滚动备份。标题横幅也是相同的，反之亦然。

这里是我的javacript代码。

jQuery(document).on("scroll", function(){ 
    if 
    (jQuery(document).scrollTop() > 200){ 
     jQuery(".logo").addClass("reveal"); 
    } 
    else 
    { 
     jQuery(".logo").removeClass("reveal"); 
    } 
}); 

jQuery(document).on("scroll", function(){ 
    if 
    (jQuery(document).scrollTop() > 200){ 
     jQuery(".slides").removeClass("reveal"); 
    } 
    else 
    { 
     jQuery(".slides").addClass("reveal"); 
    } 
});

这里的CSS代码

.slides { 
opacity: 1; 
} 


.logo { 
opacity: 0; 
} 

.reveal { 
opacity: 1; 
-webkit-animation: reveal 0.4s ease-in-out; 
-moz-animation: reveal 0.4s ease-in-out; 
} 

@-moz-keyframes reveal { 
from { 
    opacity: 0; 
} 

to { 
    opacity: 1; 
}; 
} 

@-webkit-keyframes reveal { 
from { 
    opacity: 0; 
} 

to { 
    opacity: 1; 
}; 
}

答

滚动时，它匹配的，如果< 200条件“其他”这增加了“揭露”类.slides。这会导致闪烁，因为类不在页面加载中，但它在滚动时立即添加。

如果您将“揭示”类添加到源代码中的.slides元素（因此当页面加载时它存在），则闪烁应该消失。

滚动时在标题上淡入淡出徽标

相关推荐