在Android上向上滚动时,JQUERY scrollTop闪烁

时间:2020-03-30 13:53:32

标签: javascript jquery html css

嗨,我想在向上滚动时将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;
}

0 个答案:

没有答案