Привет. Я пытаюсь вставить div в верхнюю часть страницы при прокрутке вверх и скрыть при прокрутке вниз. Вкл. Android При прокрутке вверх появляется мерцание? Что может быть причиной этого?
JQUERY
$(document).ready(function() {
var $src = $('#banner');
var $topHeader = $('.header_upper');
var $bottomHeader = $('.header_lower');
var $nav = $('#nav-headers');
$topHeader.last().addClass("header-top-stick");
$bottomHeader.last().addClass("bottom-top-stick");
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop) {
$src.last().removeClass("sticky-scroll").css("display", "none");
$src.last().removeClass("stick-top");
$topHeader.last().removeClass("header-top-stick");
$bottomHeader.last().removeClass("bottom-top-stick");
} else {
$src.last().addClass("sticky-scroll").css("display", "block");
$topHeader.last().addClass("header-top-stick");
$bottomHeader.last().addClass("bottom-top-stick");
}
if (st == 0) {
$src.last().addClass("stick-top").css("display", "block");
//$src.last().removeClass("sticky-scroll");
$topHeader.last().addClass("header-top-stick");
$bottomHeader.last().addClass("bottom-top-stick");
}
lastScrollTop = st;
if ($nav.css('top') == '0') {
$src.css("display", "block");
} else if ($nav.css('top') == '-140px') {
$src.hide();
}
});
});
CSS
.sticky-scroll {
top: 0px;
position: fixed;
}
.sticky-scroll2 {
top: 0px;
position: fixed;
}
.stick-top {
top: 0px;
position: fixed;
}
.header-top-stick {
top: 140px!important;
}
.bottom-top-stick {
top: 180px!important;
}
#banner{
background-color:#dfdfdf;
color: #FFF!important;
text-decoration:none!important;
padding:10px;
text-align:center;
height:140px;
cursor:pointer;
z-index:999999;
}
#headers{
top:110px!important;
z-index: 999999;
}