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开头可见,但我希望它在不可见的情况下启动。只是想知道最好的方法是什么。 –