2016-01-13 78 views
0

除了在向下滚动时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 { 
 
\t opacity: 1; 
 
    height: 42px; 
 
    width: 60px; 
 
    position: relative; 
 
\t } 
 
.optFA-L { 
 
\t margin: 15px 0 15px 10px; 
 
    float: left; 
 
    height: 42px; 
 
    width: 60px; 
 
    overflow: hidden; 
 
} \t 
 
.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; 
 
}
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

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

+0

感谢编辑@Blazemonger。此外,这仅适用于移动设备。 –

+0

我试图复制您的问题,但我没有看到您提到的闪烁:https://jsfiddle.net/wtn69qfj/ –

+0

感谢您尝试复制,我认为我看到了问题,它以opt-FA1开头可见,但我希望它在不可见的情况下启动。只是想知道最好的方法是什么。 –

回答

0

添加opacity:0;,将闪烁的元素,以设置其默认状态为“无形”,例如:https://jsfiddle.net/wtn69qfj/1/

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