Highlight nav links when scrolling the page

[blyk]

Hi,
I have created a single page web templet where I am trying to hightlight the links depending on the section that I am viewing.

Here is the codepenlink: http://codepen.io/blyk/pen/JGtfd

I dont have any problem with this code by as you notice I have used mouseenter function to identify the divs’ id. It is some sort of hack or my stupidity :/

Actually I was trying to bring the same effect without this stupid hack so I was going throught various stackflow and other blogs to find out the answer but whatever I got has either long code which I cant understand becuase I am noob or used some sort of plugin.

I am using this hack becasue it used very less code but I want to learn real jquery code for this whic can do this using less code . pease help ! :) :)

thanks

[Paulie_D]

Frankly, it looks fine to me but I’m no JS/JQ expert.

What I like about it is that it’s easy to understand at a casual code inspection.

I cut and paste with the best of them.. :)

[blyk]

Thanks Paulie_D :) and sorry I accidently clicked on Feature Bury I dont know what are these. I thought these are some sort of your website link :( .

[clokey2k]

I agree with Paulie_D, I think this is an elegant solution of the problem.

The only challenge would on touch-screen devices or people who read with arrow keys and space-bar.

I would end up checking the position of the div‘s on every scroll event to see which div is above the window edge

See: http://codepen.io/clokey2k/pen/jgfFD

[blyk]

Thanks clokey2k :) just one request. Would you comment the code for me to understand how it is working :) thanks again :)

[clokey2k]

I have just saved a copy with comments. Hopefully my ramblings will make sense.

The general test is to see which div‘s have passed the top of the window. The assumption is that the last div to pass the top is the one you are reading.

Good luck

[Author]

Posts