Grow your CSS skills. Land your dream job.

Highlight nav links when scrolling the page

  • # June 25, 2014 at 3:33 am

    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

    # June 25, 2014 at 3:42 am

    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.. :)

    # June 25, 2014 at 3:59 am

    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 :( .

    # June 25, 2014 at 4:25 am

    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

    # June 25, 2014 at 4:32 am

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

    # June 25, 2014 at 5:23 am

    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".