检测用户在网页上的位置

Question

假设我有一个HTML页面。例如，2000像素长。我想检测访问者是否到达页面上的某个点。

页面结构：

• 0px =页面的开头;
• 500px =关于我们页面;
• 1000px = contactpage;

有没有办法让jQuery检测用户是否达到了上述各点？

Answer 1

您可能需要jQuery的scroll事件绑定功能。

Answer 2

是的，我会创建三个div，然后在每个div上都有一个鼠标悬停事件。例如：

$("#begin").mouseover(function(){
   alert("over begin");
});

$("#about").mouseover(function(){
   alert("over about");
});

$("#contact").mouseover(function(){
   alert("over contact");
});

你可以在这里看到一个工作小提琴：http://jsfiddle.net/ezj9F/

Answer 3

尝试THIS工作片段。

使用此代码，您不必知道要检查的元素的位置是否可见。

的JavaScript

var $window = $(window);
// # of pixels from the top of the document to the top of div.content
var contentTop = $("div.content").offset().top;
// content is visible when it is on the bottom of the window and not at the top
var contentStart = contentTop - $window.height();
// content is still visible if any part of his height is visible
var contentEnd = contentTop + $("div.content").height();

$window.scroll(function() {
  var scrollTop = $window.scrollTop();
  if(scrollTop > contentStart && scrollTop < contentEnd) {
    console.log('You can see "HELLO"!');
  } else {
    console.log('You cannot see "HELLO"!');
  }
});

HTML

<div class="scroll"></div>
<div class="content">HELLO</div>
<div class="scroll"></div>

CSS

div.scroll {
  background-color: #eee;
  width: 100px;
  height: 1000px;
}

div.content {
  background-color: #bada55;
  width: 100px;
  height: 200px;
}

编辑：现在算法正在检查div.content的任何部分是否可见（它正在考虑元素的高度）。如果您对此更改contentEnd对var contentEnd = contentTop不感兴趣。