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>
感謝編輯@Blazemonger。此外,這僅適用於移動設備。 –
我試圖複製您的問題,但我沒有看到您提到的閃爍:https://jsfiddle.net/wtn69qfj/ –
感謝您嘗試複製,我認爲我看到了問題,它以opt-FA1開頭可見,但我希望它在不可見的情況下啓動。只是想知道最好的方法是什麼。 –