个人中心
gpt4 book ai didi

javascript - 如何停止 slideUp 和 down 在事件停止时继续运行

转载 作者：行者123 更新时间：2023-11-29 23:24:30 25 4
gpt4 key购买 nike

我有一个函数，如果 scrollTop > 50 将显示 div 元素，如果小于 100 则将其隐藏，但我的问题是当我尝试使用我的窗口滚动播放时向上滚动反复快速(如5x)并立即停止，div元素仍在上下运行，如何防止此问题继续运行？非常感谢您的帮助。 

$(document).ready(function() {

  $(document).scroll(function(e) {
    e.stopPropagation();
    if ($(this).scrollTop() > 50) {
      $(".head").slideDown();
    } else {
      $(".head").slideUp();
    }
  });

});
.head {
  display: none;
  height: 50px;
  width: 100%;
  position: fixed;
  top: 0;
  background: red;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <title></title>
</head>

<body>
  <div class="head"></div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere dui a nisl malesuada, eget sodales tellus faucibus. Duis malesuada in nunc a sodales. Cras laoreet rhoncus dolor ac iaculis. Vivamus dignissim, elit sit amet molestie interdum,
    leo mi hendrerit augue, ac ullamcorper tortor libero eget dui. Morbi blandit nulla iaculis, suscipit metus ac, sodales enim. Etiam rhoncus dolor non dui facilisis mollis. In fringilla pellentesque erat, eget vestibulum ex bibendum non. Mauris ac orci
    sit amet ligula luctus vulputate. Sed at maximus quam. Vivamus maximus ultrices condimentum. Nulla mattis, sapien in ultricies aliquam, ante orci rhoncus tellus, vel euismod dolor ante tempus magna. Suspendisse potenti. Vestibulum a diam a dolor vestibulum
    faucibus id sit amet neque. Ut fringilla neque malesuada pellentesque tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut lacinia lectus, ultrices fringilla felis. Donec nunc enim, rutrum ac ullamcorper
    a, lacinia et ante. Sed feugiat nisl in luctus tincidunt. Proin accumsan metus vitae tincidunt laoreet. Curabitur posuere, magna quis venenatis egestas, lorem orci accumsan ipsum, tristique posuere magna ante at elit. Nullam sagittis semper hendrerit.
    Nunc tempus lobortis risus eu dictum. Nullam molestie dui non eleifend placerat. Nunc at est porta, scelerisque eros nec, bibendum turpis. Duis et sagittis ex, sed euismod justo. In malesuada imperdiet enim, vitae volutpat eros. In porta diam at justo
    volutpat fringilla. Nam sit amet metus sit amet odio gravida convallis pharetra id metus. Nunc ultrices, felis ut sagittis dignissim, ex urna consequat ipsum, sit amet venenatis est orci non risus. Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Suspendisse posuere dui a nisl malesuada, eget sodales tellus faucibus. Duis malesuada in nunc a sodales. Cras laoreet rhoncus dolor ac iaculis. Vivamus dignissim, elit sit amet molestie interdum, leo mi hendrerit augue, ac ullamcorper tortor
    libero eget dui. Morbi blandit nulla iaculis, suscipit metus ac, sodales enim. Etiam rhoncus dolor non dui facilisis mollis. In fringilla pellentesque erat, eget vestibulum ex bibendum non. Mauris ac orci sit amet ligula luctus vulputate. Sed at maximus
    quam. Vivamus maximus ultrices condimentum. Nulla mattis, sapien in ultricies aliquam, ante orci rhoncus tellus, vel euismod dolor ante tempus magna. Suspendisse potenti. Vestibulum a diam a dolor vestibulum faucibus id sit amet neque. Ut fringilla
    neque malesuada pellentesque tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut lacinia lectus, ultrices fringilla felis. Donec nunc enim, rutrum ac ullamcorper a, lacinia et ante. Sed feugiat
    nisl in luctus tincidunt. Proin accumsan metus vitae tincidunt laoreet. Curabitur posuere, magna quis venenatis egestas, lorem orci accumsan ipsum, tristique posuere magna ante at elit. Nullam sagittis semper hendrerit. Nunc tempus lobortis risus
    eu dictum. Nullam molestie dui non eleifend placerat. Nunc at est porta, scelerisque eros nec, bibendum turpis. Duis et sagittis ex, sed euismod justo. In malesuada imperdiet enim, vitae volutpat eros. In porta diam at justo volutpat fringilla. Nam
    sit amet metus sit amet odio gravida convallis pharetra id metus. Nunc ultrices, felis ut sagittis dignissim, ex urna consequat ipsum, sit amet venenatis est orci non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere
    dui a nisl malesuada, eget sodales tellus faucibus. Duis malesuada in nunc a sodales. Cras laoreet rhoncus dolor ac iaculis. Vivamus dignissim, elit sit amet molestie interdum, leo mi hendrerit augue, ac ullamcorper tortor libero eget dui. Morbi blandit
    nulla iaculis, suscipit metus ac, sodales enim. Etiam rhoncus dolor non dui facilisis mollis. In fringilla pellentesque erat, eget vestibulum ex bibendum non. Mauris ac orci sit amet ligula luctus vulputate. Sed at maximus quam. Vivamus maximus ultrices
    condimentum. Nulla mattis, sapien in ultricies aliquam, ante orci rhoncus tellus, vel euismod dolor ante tempus magna. Suspendisse potenti. Vestibulum a diam a dolor vestibulum faucibus id sit amet neque. Ut fringilla neque malesuada pellentesque
    tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut lacinia lectus, ultrices fringilla felis. Donec nunc enim, rutrum ac ullamcorper a, lacinia et ante. Sed feugiat nisl in luctus tincidunt. Proin
    accumsan metus vitae tincidunt laoreet. Curabitur posuere, magna quis venenatis egestas, lorem orci accumsan ipsum, tristique posuere magna ante at elit. Nullam sagittis semper hendrerit. Nunc tempus lobortis risus eu dictum. Nullam molestie dui non
    eleifend placerat. Nunc at est porta, scelerisque eros nec, bibendum turpis. Duis et sagittis ex, sed euismod justo. In malesuada imperdiet enim, vitae volutpat eros. In porta diam at justo volutpat fringilla. Nam sit amet metus sit amet odio gravida
    convallis pharetra id metus. Nunc ultrices, felis ut sagittis dignissim, ex urna consequat ipsum, sit amet venenatis est orci non risus.
  </p>
</body>

</html>

最佳答案

您可以使用 setTimeout防止每次用户向上或向下滚动时将动画添加到动画队列的功能，并仅在短暂延迟后为您的 div 设置动画:

$(document).ready(function() {
  let timer;
  $(document).scroll(function(e) {
    e.stopPropagation();
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      if ($(this).scrollTop() > 50) {
         $(".head").slideDown();
      } else {
        $(".head").slideUp();
      }
    }, 100);
  });

});
.head {
  display: none;
  height: 50px;
  width: 100%;
  position: fixed;
  top: 0;
  background: red;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <title></title>
</head>

<body>
  <div class="head"></div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere dui a nisl malesuada, eget sodales tellus faucibus. Duis malesuada in nunc a sodales. Cras laoreet rhoncus dolor ac iaculis. Vivamus dignissim, elit sit amet molestie interdum,
    leo mi hendrerit augue, ac ullamcorper tortor libero eget dui. Morbi blandit nulla iaculis, suscipit metus ac, sodales enim. Etiam rhoncus dolor non dui facilisis mollis. In fringilla pellentesque erat, eget vestibulum ex bibendum non. Mauris ac orci
    sit amet ligula luctus vulputate. Sed at maximus quam. Vivamus maximus ultrices condimentum. Nulla mattis, sapien in ultricies aliquam, ante orci rhoncus tellus, vel euismod dolor ante tempus magna. Suspendisse potenti. Vestibulum a diam a dolor vestibulum
    faucibus id sit amet neque. Ut fringilla neque malesuada pellentesque tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut lacinia lectus, ultrices fringilla felis. Donec nunc enim, rutrum ac ullamcorper
    a, lacinia et ante. Sed feugiat nisl in luctus tincidunt. Proin accumsan metus vitae tincidunt laoreet. Curabitur posuere, magna quis venenatis egestas, lorem orci accumsan ipsum, tristique posuere magna ante at elit. Nullam sagittis semper hendrerit.
    Nunc tempus lobortis risus eu dictum. Nullam molestie dui non eleifend placerat. Nunc at est porta, scelerisque eros nec, bibendum turpis. Duis et sagittis ex, sed euismod justo. In malesuada imperdiet enim, vitae volutpat eros. In porta diam at justo
    volutpat fringilla. Nam sit amet metus sit amet odio gravida convallis pharetra id metus. Nunc ultrices, felis ut sagittis dignissim, ex urna consequat ipsum, sit amet venenatis est orci non risus. Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Suspendisse posuere dui a nisl malesuada, eget sodales tellus faucibus. Duis malesuada in nunc a sodales. Cras laoreet rhoncus dolor ac iaculis. Vivamus dignissim, elit sit amet molestie interdum, leo mi hendrerit augue, ac ullamcorper tortor
    libero eget dui. Morbi blandit nulla iaculis, suscipit metus ac, sodales enim. Etiam rhoncus dolor non dui facilisis mollis. In fringilla pellentesque erat, eget vestibulum ex bibendum non. Mauris ac orci sit amet ligula luctus vulputate. Sed at maximus
    quam. Vivamus maximus ultrices condimentum. Nulla mattis, sapien in ultricies aliquam, ante orci rhoncus tellus, vel euismod dolor ante tempus magna. Suspendisse potenti. Vestibulum a diam a dolor vestibulum faucibus id sit amet neque. Ut fringilla
    neque malesuada pellentesque tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut lacinia lectus, ultrices fringilla felis. Donec nunc enim, rutrum ac ullamcorper a, lacinia et ante. Sed feugiat
    nisl in luctus tincidunt. Proin accumsan metus vitae tincidunt laoreet. Curabitur posuere, magna quis venenatis egestas, lorem orci accumsan ipsum, tristique posuere magna ante at elit. Nullam sagittis semper hendrerit. Nunc tempus lobortis risus
    eu dictum. Nullam molestie dui non eleifend placerat. Nunc at est porta, scelerisque eros nec, bibendum turpis. Duis et sagittis ex, sed euismod justo. In malesuada imperdiet enim, vitae volutpat eros. In porta diam at justo volutpat fringilla. Nam
    sit amet metus sit amet odio gravida convallis pharetra id metus. Nunc ultrices, felis ut sagittis dignissim, ex urna consequat ipsum, sit amet venenatis est orci non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere
    dui a nisl malesuada, eget sodales tellus faucibus. Duis malesuada in nunc a sodales. Cras laoreet rhoncus dolor ac iaculis. Vivamus dignissim, elit sit amet molestie interdum, leo mi hendrerit augue, ac ullamcorper tortor libero eget dui. Morbi blandit
    nulla iaculis, suscipit metus ac, sodales enim. Etiam rhoncus dolor non dui facilisis mollis. In fringilla pellentesque erat, eget vestibulum ex bibendum non. Mauris ac orci sit amet ligula luctus vulputate. Sed at maximus quam. Vivamus maximus ultrices
    condimentum. Nulla mattis, sapien in ultricies aliquam, ante orci rhoncus tellus, vel euismod dolor ante tempus magna. Suspendisse potenti. Vestibulum a diam a dolor vestibulum faucibus id sit amet neque. Ut fringilla neque malesuada pellentesque
    tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut lacinia lectus, ultrices fringilla felis. Donec nunc enim, rutrum ac ullamcorper a, lacinia et ante. Sed feugiat nisl in luctus tincidunt. Proin
    accumsan metus vitae tincidunt laoreet. Curabitur posuere, magna quis venenatis egestas, lorem orci accumsan ipsum, tristique posuere magna ante at elit. Nullam sagittis semper hendrerit. Nunc tempus lobortis risus eu dictum. Nullam molestie dui non
    eleifend placerat. Nunc at est porta, scelerisque eros nec, bibendum turpis. Duis et sagittis ex, sed euismod justo. In malesuada imperdiet enim, vitae volutpat eros. In porta diam at justo volutpat fringilla. Nam sit amet metus sit amet odio gravida
    convallis pharetra id metus. Nunc ultrices, felis ut sagittis dignissim, ex urna consequat ipsum, sit amet venenatis est orci non risus.
  </p>
</body>

</html>

关于javascript - 如何停止 slideUp 和 down 在事件停止时继续运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49714709/

25 4 0
文章推荐： android - 从 ListView 中删除项目 onlongclick
文章推荐： php - 如何登录croogo cakephp框架的管理面板
文章推荐： android - 如何让 mailto 在 android chrome 上工作？
文章推荐： mysql - Ruby，连接到 sql 服务器
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com