元件闪烁

Element Flashing

本文关键字：闪烁      更新时间：2023-09-26

除了optFA-1在向下滚动时短暂闪烁外，其他一切都能正常工作。我不确定这是因为CSS（我认为不是），还是JS中没有适当设置值。

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

将opacity:0;添加到闪烁元素，以便将其默认状态设置为"不可见"，如下所示：https://jsfiddle.net/wtn69qfj/1/

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

相关文章：