Javascript 仅在滚动上启动一次功能

所以，我只想在scroll上启动一次函数

问题是我不能只启动函数一次。我尝试过不同的解决方案（.on（），设置计数器，在window.scrollstop函数的外部/内部设置计数器），但没有任何效果

它确实有用。。。但它在我滚动的时候起作用！：（

我不认为这很难，但是我到目前为止还没能使它成功

这是我的密码：

$(window).scroll(function(){
    $('.sr-icons').toggleClass('scrolled', $(this).scrollTop() > 950);  
});

CSS:

和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>

坚固的模板
我们的模板会定期更新，这样它们就不会损坏
准备装船
您可以按原样使用此主题，也可以进行更改
最新的
我们更新依赖项以保持新鲜
我为你工作
只要想想你想要的任何网站，我都会让它成为现实

您可以使用标志变量，最初为0，然后滚动递增。 然后您可以将支票添加为

var flag=0;
$(window).scroll(function(){  
if(flag==0){
$('.sr-icons').toggleClass('scrolled', $(this).scrollTop() > 950); 
flag++;
}
});

---

如果我理解你的意思，你可以这样做：

$(window).on('scroll', function(){
    if($(this).scrollTop() > 950) {
        $('.sr-icons').toggleClass('scrolled', true);
        $(window).off('scroll');
    }
});

正如在其他评论中所说，您应该检查您是想要

$（this）.scrollTop（）>950

还是

$（this）.scrollTop（）<950

编辑：一个更合适的解决方案是只删除特定的处理程序，这样您就可以在scroll上附加其他事件，如果您想要：

var handler = function(){
    if($(this).scrollTop() > 950) {
        $('.sr-icons').toggleClass('scrolled', true);
        $(window).off('scroll', handler);
    }
}
$(window).on('scroll', handler);

---

试试

.one（'scroll'）

@AjAX:我不知道jQuery有多少，但是否有太多的e？@Lain没有。这是有趣的部分。它只触发一次。然后删除

事件处理程序

。所以标记代码在满足条件时运行一次。@AjAX:哦，很好，在这里学到了一些东西。谢谢：-）有趣的事情，只有当我在正确的scrollTop（）位置并刷新时，它才会这样工作！但是如果我在页面的开头，然后向下滚动到需要启动动画的地方……它不会！发生O_oit是因为页面滚动事件已经触发了一次，所以不允许再次执行该代码。您可以在document.ready（页面加载完成后）上将flag设置为0小打字

$（窗口）。off（'scroll'）啊哈！你真是太棒了！你明白了，伙计！它就像一个符咒！谢谢你：）也谢谢你用另一种方式来做@马塞尔很高兴这有帮助；）不过，请检查更新的答案，这可能在future@Logar是的！把它写在这里好好学习！再次感谢你，伙计@马塞尔好；）如果您有解决方案，请随时标记为已解决
var handler = function(){
    if($(this).scrollTop() > 950) {
        $('.sr-icons').toggleClass('scrolled', true);
        $(window).off('scroll', handler);
    }
}
$(window).on('scroll', handler);