窗口上的运行函数在jQuery中滚动一次 [英] Running function on window scroll once in jQuery

问题描述

我正在创建我的投资组合，当我进入我的技能部分时，我正试图让我的技能栏加载。我希望他们只做一次，无论是有人滚动到这个部分还是直接从导航转到它。这是我的代码：

I'm creating my portfolio and I'm trying to make my skill bars load when I go to "My skills" section. I want them to do it only once, either when someone scroll to this section or goes to it straight away from the navigation. This is my code:

var skills = $('#mySkills');
  var skillsPositionTop = skills.position().top;
 $(window).on("resize scroll", function (){
      if (pageYOffset<skillsPositionTop-20 && pageYOffset>skillsPositionTop-80){
    console.log ("here is my loading script");

}
}）;

} });

当我在上使用一个而不是时，它不起作用，我在if语句中使用一个在窗口上创建了一个函数时不起作用。
我试图用 return 或返回false 来退出函数，这里，堆栈溢出我发现了一些关于旗帜的东西，我没有完全理解，但我尝试了不同的组合。
有人可以帮我吗？我已经看到有这种类型效果的库，但没有必要安装任何一件事......

It doesn't work when I use one instead of on, doesn't work when I created one more function on window with one inside my if statement. I was trying exit the function with return or return false as well and here, on stack overflow I found something about flag, which I didn't fully understand but I tried different combinations with it. Can someone please help me with it? I've seen there is a library for this type of effects, but there is no point of installing any just for one thing...

编辑。 Console.log代表我的加载代码。

Edit. Console.log represens my loading code.

推荐答案

您可以在 .on（）<设置命名空间/ code> for resize ， scroll events，使用 .off（）在 if 语句中删除命名空间事件。

You can set a namespace at .on() for resize, scroll events, use .off() within if statement to remove namespaced events.

var skills = $('#mySkills');
var skillsPositionTop = skills.position().top;
$(window).on("resize.once scroll.once", function (){
  if (pageYOffset<skillsPositionTop-20 && pageYOffset>skillsPositionTop-80) {
    $(this).off("resize.once").off("scroll.once");
    console.log ("here is my loading script");
  }
});

这篇关于窗口上的运行函数在jQuery中滚动一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！