2016-01-13 110 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的將工作方式相同,但該元素默認情況下會在頁面加載時顯示爲透明。