Question

一旦您开始滚动到网页内容，我就有一个标题想要隐藏。这是我使用的代码：

$(window).scroll(function() {
  if ($(this).scrollTop() > 900) {
    $("header").css({
      display: "none"
    });
  }
});

$(window).scroll(function() {
  if ($(this).scrollTop() > 900) {
    $("#msg").css({
      display: "none"
    });
  }
});

但是，当我开始滚动时，页眉确实正确消失了，其他一些元素暂时消失了并且页面跳来跳去。当我滚动到顶部时，标题消失了（就像我想要的一样），其他元素也就应该放置到位。当使用ScrollReveal滚动时，我的其他元素也会触发出现，所以我不知道这是否会以某种方式干扰。

ScrollReveal().reveal(".glitch", {
  delay: 3000,
  easing: "ease-in"
});

ScrollReveal().reveal("header", {
  delay: 5000,
  easing: "ease-in"
});

ScrollReveal().reveal(".arrow", {
  delay: 7000,
  distance: "-50px",
  easing: "ease-in"
});

ScrollReveal().reveal("nav", {
  delay: 8000,
  easing: "ease-in"
});

Answer 1

您可以采取一些措施来防止这种情况的发生。基本上，该问题与以下事实有关：即使隐藏了div，您仍会反复重新隐藏该div，实际上，实际上是您多次“淹没”了浏览器。

1。创建一个“状态”变量

创建一个变量来存储元素的当前可见性状态，并且仅在var表示尚未隐藏div时才隐藏div：

var hdrVisible = true, msgVisible = true;

$(window).scroll(function() {
  if ($(this).scrollTop() > 900) {
    if (hdrVisible){
        $("header").hide();
        hdrVisible = false;
    }
  }
});

$(window).scroll(function() {
  if ($(this).scrollTop() > 900) {
    if (msgVisible){
        $("#msg").hide();
        msgVisible = false;
    }
  }
});

2。使用去抖动器

此外，您应该查看geometry library插件。它将允许您限制功能将触发的次数。

window.scroll()函数每秒触发多次-要查看多少次，请查看此示例：

$(window).scroll(function(){
   let tmp = $(window).scrollTop();
   $('#msg').html(tmp);
});

body{height:5000px;}
#msg{position:fixed;top:0;right:0;padding:15px;background:wheat;text-align:center;font-size:1.3rem;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="msg"></div>

滚动滚动时隐藏元素

1 个答案:

1。创建一个“状态”变量

2。使用去抖动器