元素闪烁

Question

一切都按预期工作，只是在向下滚动时optFA-1会短暂闪烁。我不确定这是由于CSS（我认为不是），还是在JS中没有正确设置值。

＆＃13;

＆＃13;

$(function(){
    var lastScrollTop = 0, delta = 5;
    $(window).scroll(function(event){
       var st = $(this).scrollTop();
       if(st === 0) {
            $("#optFA-1").css('visibility','hidden').animate({opacity:0}, 100);
       }
       else{
           if(Math.abs(lastScrollTop - st) <= delta)
              return;
           
           if (st > lastScrollTop){
               // downscroll code
               $("#optFA-1").css('visibility','hidden').css('opacity', 0);
           } else {
              // upscroll code
              $("#optFA-1").css('visibility','visible').css('opacity', 1);
           }
           lastScrollTop = st;
       }
    });
    
});

＆＃13;

#optFA-1 {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    transition: all 0.3s;
    z-index: 9;
    background: #202020;
}
#optFA-1 img {
	opacity: 1;
    height: 42px;
    width: 60px;
    position: relative;
	}
.optFA-L {
	margin: 15px 0 15px 10px;
    float: left;
    height: 42px;
    width: 60px;
    overflow: hidden;
}	
.optFA-R {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    position: absolute;
    top: 12px;
    line-height: 14px;
    left: 78px;
    right: 21px;
    font-weight: bold;
    color: #ffffff;
    font-size: 12px;
}

＆＃13;

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

	<div id="optFA-1">
	<div class="optFA-X"></div>
	<div class="optFA-L"><img src=""></div>
	<div class="optFA-R"><span>Next Up</span><br />Fairies Caught Smoking Crack in Beverly Hills</div>
	</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将opacity:0;添加到闪烁元​​素，以便将默认状态设置为“隐身”，如下所示：https://jsfiddle.net/wtn69qfj/1/

jQuery将以相同的方式工作，但默认情况下，该元素在页面加载时将显示为透明。