jquery 每次滚动到时仅触发一次事件

agyaoht7  于 2023-06-29  发布在  jQuery
关注(0)|答案(1)|浏览(155)

我有一些事件,当用户滚动到元素«itemSection1».但是这个事件会重复很多次,因为用户会一直滚动直到这个元素完成。如何使事件在每次滚动到时只触发一次?
当我下一次到达这个元素时,我再次需要这个事件

$(window).scroll(function() {
    if ($(this).scrollTop() >= $('.itemSection1').offset().top - 150) {
   
    $('.scrollLinks a').removeClass('active');
    $('.menuItem1').addClass('active');

    alert('Hello!'); // some event that i need only once on reaching

    } else {
    
    $('. menuItem1').removeClass('active');
    
    }
    });
xeufq47z

xeufq47z1#

您希望在滚动后触发某些操作,但仅在达到某个偏移量时触发。因为在传递了某个阈值之后,您添加了类"active",所以可以使用该信息。
检查元素是否已经有类"active"

// add class etc only if not already added
        if (!($("p").hasClass("active"))) {
$(document).ready(function() {
      $(window).scroll(function() {
          if ($(window).scrollTop() >= 5) {
           // add class etc only if not already added
            if (!($("p").hasClass("active"))) {
                $("p").addClass("active");
                $('.scrollLinks a').removeClass('active');
                $('.menuItem1').addClass('active');
                alert('Hello!'); // some event that i need only once on reaching
              }
            }
            else {

              $('p').removeClass('active');

            }
          })
      });
p {
  background: green;
  height: 1300px;
  width: 100%;
}

.active {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Scroll down this page.</p>

相关问题