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 видимо, но я хочу, чтобы он начинался без видимости. Было просто интересно, какой лучший подход будет. –