javascript - 传递节时触发函数 - jquery

Question

我正在努力让我的代码的最后一点工作。问题是当用户滚动经过 div

时我需要触发一个函数

所以我的 html 结构大致如下

<div class="panel-grid-cell">
  <div id="pgc-1">...</div>
  <div id="pgc-2">...</div>
  ...
  <div id="pgc-n">...</div>
</div>

所以我们的想法是，当用户传递带有 id="pgc-1" 的 div 时，会触发一个函数，依此类推。

每个 div 都有一个带有 href 的 li a 项，所以我的函数看起来像这样

ga('send','event','scroll',city,$(this).text())

其中this将与li a与href相对应

目前我所拥有的就是这个。一个循环 div 并将其 id 存储在数组中的函数。并构建一个li a菜单。

 var li="";
 var linames = ["Intro","1925","1935","1945","1955","1965","1975","1985","1995","2005","Now"];
 var i = 0;
 function getSectionIDs()
 {
    $("div.panel-grid-cell").children().each(function() {
    if(linames[i] !== undefined)
    {
        li += "<li><a href='#"+$(this).attr('id')+"'>"+linames[i]+"</a></li>";           
    }
    i++;
    });
 $("ul.timeline-items").append(li);
 }

现在我还有一个函数可以检查我滚动了多远并更改每个 li 项目的类。

function onScroll(event){
  var scrollPos = $(document).scrollTop();
  $('ul.timeline-items li a').each(function () {
      var currLink = $(this);
      var refElement = $(currLink.attr("href"));
      if (refElement.position().top -75 <= scrollPos && refElement.position().top+75 + refElement.height()-75 > scrollPos) {
         $('ul.timeline-items li a').removeClass("active");
         currLink.addClass("active");
      }
      else{
         currLink.removeClass("active");
      }
    });
    }
    $(document).on("scroll", onScroll);

这段代码不是我想要的，因为它不断检查我是否通过了 div ，但我只需要触发我的函数一次。

有什么帮助吗？

Answer 1

前几天我自己找到了解决方案，

在滚动函数中只需放置一个条件:when $(document).scrollTop()等于refElement.offset() ，触发一个函数，它运行得很好。

意味着检查用户滚动了多远，如果该值等于 div 的偏移量，则触发一个函数。