Question

我正在尝试跟踪有多少人滚动到页面上的某个位置。我设法计算了导航所拥有的点击次数，但是当用户滚动浏览页面时却没有。

我的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

function tracker(trackVal){

if($.trim(trackVal) != ""){

}

$(document).ready(function(e) {

$(".nav a").click(function(){
    tracker($.trim($(this).html()));
    console.log($.trim($(this).html()));
});

});

Answer 1

由于你有jQuery，你可以使用像Waypoints（http://imakewebthings.com/jquery-waypoints/）这样的插件。当用户滚动浏览页面上的某个点时，它会触发事件。

Answer 2

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

var positionOffset = $('.position-div').offset();
$(window).scroll(function(){
    if(($(window).scrollTop() + $(window).height()) >= positionOffset.top){
        console.log("Position reached");
    }
});

使用jquery偏移函数检查页面上的元素（.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");
      }
   }
});

如何跟踪页面上的某个位置何时滚动到？

2 个答案: