Jquery 如何跟踪页面上的某个点何时被滚动到?

Jquery 如何跟踪页面上的某个点何时被滚动到?,jquery,analytics,Jquery,Analytics,我试图跟踪有多少人滚动到页面上的某个位置。 我已经设法计算了我的导航有多少次点击,但没有计算用户在页面上滚动时的点击次数 我的HTML <div class="nav-wrapper"> <div class="nav"> <a href="#headingA">HEADING A</a> <a href="#headingB">HEADING B</a> <a href="#headingC">HEADING

我试图跟踪有多少人滚动到页面上的某个位置。 我已经设法计算了我的导航有多少次点击,但没有计算用户在页面上滚动时的点击次数

我的HTML

<div class="nav-wrapper">
<div class="nav">
<a href="#headingA">HEADING A</a>
<a href="#headingB">HEADING B</a>
<a href="#headingC">HEADING C</a>
</div>
</div>


<div class="headingA">Heading 1</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris luctus ultrices adipiscing. Nunc suscipit ultrices est, vel pharetra metus. Maecenas condimentum metus vitae metus rutrum vehicula. Morbi porttitor consequat tincidunt. Aliquam elementum ac nisi vel blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer dapibus egestas purus sed euismod. Vivamus vel nisl in ante venenatis porttitor. Mauris at egestas tortor.</p>
<div class="headingB">Heading 2</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris luctus ultrices adipiscing. Nunc suscipit ultrices est, vel pharetra metus. Maecenas condimentum metus vitae metus rutrum vehicula. Morbi porttitor consequat tincidunt. Aliquam elementum ac nisi vel blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer dapibus egestas purus sed euismod. Vivamus vel nisl in ante venenatis porttitor. Mauris at egestas tortor.</p>
<div class="headingC">Heading 3</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris luctus ultrices adipiscing. Nunc suscipit ultrices est, vel pharetra metus. Maecenas condimentum metus vitae metus rutrum vehicula. Morbi porttitor consequat tincidunt. Aliquam elementum ac nisi vel blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer dapibus egestas purus sed euismod. Vivamus vel nisl in ante venenatis porttitor. Mauris at egestas tortor.</p>

因为您有jQuery,所以可以使用类似Waypoints的插件。当用户滚动超过页面上的某个点时,它会触发一个事件。

我可能会选择这样的解决方案:

var positionOffset = $('.position-div').offset();
$(window).scroll(function(){
    if(($(window).scrollTop() + $(window).height()) >= positionOffset.top){
        console.log("Position reached");
    }
});
使用jquery offset函数检查页面上的element.position div位置和窗口上的scrollTop以查看滚动位置

也可以检查窗口是否大于元素。position-div。 只需在处理任何滚动之前查看元素是否可见

编辑:

在第一次滚动时选中:

var positionOffset = $('.position-div').offset();
var firstScroll = true;

$(window).scroll(function(){
   if(($(window).scrollTop() + $(window).height()) >= positionOffset.top){
      if(firstScroll){
        firstScroll = false;
        console.log("First time scrolled to");
      } else {
          console.log("Next time scrolled to");
      }
   }
});

这接近我想要的,但不完全是。我需要它显示1,如果它是第一次滚动,如果用户滚动回到它,那么它将显示2。这有意义吗?检查更新的答案。只需将console.log更改为代码希望发生的事情,但仍然不是这样。如果我还在一个区,它会继续计数。如果我向下滚动到标题A,它会显示1,如果我向下滚动到标题B,它不会再次计数。当我到达标题B时,它会显示标题B的1,它不会再次计数。但如果我再次向上滚动到标题A,它将显示2。这有用吗?
var positionOffset = $('.position-div').offset();
var firstScroll = true;

$(window).scroll(function(){
   if(($(window).scrollTop() + $(window).height()) >= positionOffset.top){
      if(firstScroll){
        firstScroll = false;
        console.log("First time scrolled to");
      } else {
          console.log("Next time scrolled to");
      }
   }
});