在页面滚动上更改活动导航图像？

Question

我尝试重现类似于此网站上使用的导航栏：http://www.julisudi.com/。我正在寻找的主要效果是在页面上达到正确的锚点时让每个图像变为活动状态。

我已经看到通过http://jsfiddle.net/Vandeplas/up4nu/150/文本完成此操作我还创建了一些图像，并使用以下CSS重现“更改颜色”。图像变为活动时的效果：

#mainmenu a img {
     position: relative;
     margin-bottom: -30px;
     margin-top: 5px;
}

#mainmenu a img:hover, #mainmenu a img.active{ 
     top: -31px;
}

我遇到的问题是替换jfiddle中的代码，使其适用于图像而不是文本。如果有人能提供帮助那就太棒了！

Answer 1

您可以对任何元素使用id，它可以是<p>或<img>。

在菜单中，如果<a>填充了文字img或两者，则无关紧要。

http://jsfiddle.net/up4nu/2682/