Как остановить слайды вверх и вниз, пока событие остановлено

avatar
Riantori
8 апреля 2018 в 05:24
43
1
2

У меня есть функция, которая будет отображать элемент div, если scrollTop > 50, и скрывать его, если меньше 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>
Источник
huan feng
8 апреля 2018 в 05:32
0

Не уверен, что понял ваш вопрос ясно. Я думаю, что если проблема вызвана быстрой прокруткой, может быть, ее можно решить с помощью метода jQuery debounce?

Pedram
8 апреля 2018 в 05:37
1

Используйте stop() перед slideDown или slideUp

Riantori
8 апреля 2018 в 06:01
0

@huanfeng извините, если не ясно, я имею в виду, если я прокручиваю страницу вверх и вниз с быстрой скоростью, скажем, в 5 раз, головной элемент с задержкой перемещается вверх и вниз

Ответы (1)

avatar
Kirill Simonov
8 апреля 2018 в 07:44
1

Вы можете использовать функцию 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>
Kirill Simonov
8 апреля 2018 в 19:32
0

@Riantori Рад был помочь!