Question

这是设置，我在页面上有多个div，它们是全宽并且有颜色块。 div的数量可能因页面而异。每个div都有一个与之关联的类（浅色或深色），并且我有一个固定在浏览器窗口顶部的徽标。

我想要完成的是这个。我想检测这些div（带有一个公共类）的每一个何时到达浏览器窗口的顶部。然后我想看看它是否有一个浅色或深色的类（只有这个div刚刚到达顶部。）然后根据该值更改页面上的徽标。

我遇到的最接近的是一些屏幕上的jquery插件，它会将屏幕上的值添加到屏幕上的当前div。如果我只能在屏幕属性到达顶部而不是仅进入视图时添加此屏幕属性，那将是很好的。

有没有人对如何实现这一目标有任何建议？

// jsfiddle example

Answer 1

好笑，我只是在看一个做这件事的图书馆：

您可以为元素添加侦听器，当元素到达视口顶部时，该元素将触发：

$('#myDiv').waypoint(function() {
  var color = $(this).css('background-color');
  $('img.logo').attr('src', 'logo.png');
});

有关它的精彩演示：

Answer 2

我完全同意Chris Hardie的说法，Waypoints是要走的路。我根据你的描述构建了一个简单的例子。

Answer 3

Here is the fiddle，我使用了自己的，因为我在你发布你的小提琴之前就已经开始了，但这个想法是完全相同的。

我有一个logo元素的位置，当滚动发生时，我检查其中一个所需的块是否与徽标块相交。成功时，自定义data-trigger-class属性的类将分配给logo元素。