页面滚动时函数重复触发，如何实现仅触发一次？

我明白你的困扰——现在的代码每次滚动都会执行判断，导致scrolled类被反复切换，而你只希望在滚动到指定位置时仅触发一次样式变化。下面给你两种可靠的解决方案：

方案一：使用触发标记变量（推荐） #

我们可以用一个变量记录是否已经执行过操作，确保只有第一次满足条件时才添加类：

// 初始化标记：默认未触发过操作
let isTriggered = false;

$(window).scroll(function() {
  // 仅当未触发过，且滚动位置超过950px时执行
  if (!isTriggered && $(this).scrollTop() > 950) {
    $('.sr-icons').addClass('scrolled');
    // 标记为已触发，后续滚动不再执行
    isTriggered = true;
    
    // （可选）如果之后不需要监听滚动事件，直接移除更节省性能
    // $(this).off('scroll');
  }
});

原理说明： #

• 变量isTriggered用来追踪操作是否已经执行，初始值为false
• 当滚动位置首次超过950px时，添加scrolled类，并将isTriggered设为true
• 后续滚动时，因为isTriggered已经是true，判断条件不成立，不会重复执行操作
• 可选的off('scroll')可以直接移除滚动事件监听，彻底避免后续不必要的判断

方案二：触发后直接移除滚动事件 #

如果你的场景中，触发一次后完全不需要再监听滚动，可以直接在满足条件时移除事件：

$(window).scroll(function() {
  const $window = $(this);
  if ($window.scrollTop() > 950) {
    $('.sr-icons').addClass('scrolled');
    // 移除当前滚动事件，确保不会再次触发
    $window.off('scroll');
  }
});

关键注意点： #

• 原代码中使用toggleClass会导致类被反复添加/移除，这是问题的核心之一，我们改用addClass来一次性设置样式
• 两种方案都能实现“仅触发一次”的效果，你可以根据是否需要保留后续滚动监听来选择

你的CSS和HTML代码不需要修改，保持原样即可：

CSS代码

.sr-icons.scrolled { opacity: 0.2; }

HTML代码

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-6 text-center">
      <div class="mt-5 mx-auto">
        <i class="fa fa-4x fa-superpowers text-primary mb-3 sr-icons"></i>
        <h3 class="mb-3 text-dark">Sturdy Templates</h3>
        <p class="text-muted mb-0">Our templates are updated regularly so they don't break.</p>
      </div>
    </div>
    <div class="col-lg-3 col-md-6 text-center">
      <div class="mt-5 mx-auto">
        <i class="fa fa-4x fa-paper-plane text-primary mb-3 sr-icons"></i>
        <h3 class="mb-3 text-dark">Ready to Ship</h3>
        <p class="text-muted mb-0">You can use this theme as is, or you can make changes!</p>
      </div>
    </div>
    <div class="col-lg-3 col-md-6 text-center">
      <div class="mt-5 mx-auto">
        <i class="fa fa-4x fa-newspaper-o text-primary mb-3 sr-icons"></i>
        <h3 class="mb-3 text-dark">Up to Date</h3>
        <p class="text-muted mb-0">We update dependencies to keep things fresh.</p>
      </div>
    </div>
    <div class="col-lg-3 col-md-6 text-center">
      <div class="mt-5 mx-auto">
        <i class="fa fa-4x fa-cog fa-spin text-primary mb-3 sr-icons"></i>
        <h3 class="mb-3 text-dark">I Work For You</h3>
        <p class="text-muted mb-0">Just think about any website you want to have, I will make that a reality.</p>
      </div>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Marcell