CODEWITHSUNDEEP
javascriptjquery
Riantori
Riantori

Reputation: 317

How to stop the slideUp and down keep running while the event has stop

I have a function that will showing div element if the scrollTop > 50, and hide it if less than 100, but my issue is when I try to playing with my window scroll like scroll to up and down repeatedly with quickly (like 5x) and stop it immediately, the div element still running up and down, how to prevent this issue keep running ? really appreciate your help. 

$(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>

Upvotes: 2

Views: 42

Answers (1)

Kirill Simonov
Kirill Simonov

Reputation: 8491

You can use setTimeout function to prevent animation from being added to the animation queue each time user scrolls up or down and to only animate your div after a short delay:

$(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>

Upvotes: 1

Related Questions