pie_masters pie_masters - 9 months ago 33
jQuery Question

Change Active Navigation Image on Page Scroll?

I'm attempting to reproduce a similar navigation bar to what's used on this website: http://www.julisudi.com/ . The main effect I'm looking for is to have each image become active when the correct anchor is reached on the page.

I have seen this done with text via http://jsfiddle.net/Vandeplas/up4nu/150/ I have also created some images and use the following CSS to reproduce the 'change colour' effect when the image becomes active:

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

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

The problem I'm having is replacing code in the jfiddle to make it work with images rather than text. If anyone could help that would be great!


You can use the id on any elements, it can be a <p> or an <img> .

In the menu, it doesn't matter if <a> is filled with text , img or both.