在滚动浏览其他div时修改div

Question

我有一个很长的横向页面：

<div id="viewport"></div>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>

Div 视口绝对位于屏幕的左边缘。其余的div是水平浮动的。

我想要实现的是当每个浮动div都滚动到视口div中时，它们会改变一些css属性（如不透明度）。我希望div在滚动时变为“活动”或突出显示。

谢谢！

Answer 1

我认为你不能创建自己的事件处理程序，但是你可以检查移动div的代码，如果它们在视口内并使用jQuery .animate（）函数应用高亮类容易，像这样http://jsfiddle.net/sRhJH/24/

Answer 2

jQuery的offset()方法将为您提供元素在文档中的位置。

使用它和width()来确定视口div的位置：

var vp = $('#viewport'),
    vp_offset = vp.offset(),  // has x and y properties
    vp_width = vp.width();

然后，挂钩window的滚动事件以获取页面元素的位置数据：

$(window).scroll(function() {
    // use similar offset code used above for determining the location of the 
    // scrolling moving divs
});