0

I'm trying to add an active link, so while people are scrolling, the section they are on will have the active class.

I've been using the Fiddle from this post: Change Active Menu Item on Page Scroll?

I can't get it to work in my code though.

Below is what I have so far, and my website is http://whitneyedenlewis.com

Thanks!

Community
  • 1
  • 1

1 Answers1

0

Whitney,

The fiddle from the post you mentioned does work, but you need to add an id to your <ul> so that it's <ul id="top-menu">.

enter image description here

After adding this and using the code in the aforementioned fiddle, you will see the active class moving to other links in your navigation. From there, you'll still have a little more to do, but this should answer your question.

enter image description here

Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61
  • Thank you for taking a look! I added the #top-menu to the ul and added position absolute to my anchor ids. The active class isn't moving though... Any thoughts? – Whitney Lewis Apr 20 '16 at 15:24
  • The way I tested that this was working was to go into the dev tools console in Chrome and paste in the JavaScript from the fiddle you referenced. Once I pasted it in and hit enter, I began testing the scroll. I could see the active class being applied. It just needed polish. I'm adding a humongous gif to answer, so you can see it working. – Andy Hoffman Apr 20 '16 at 15:47
  • I've got the active link working properly. But, still only if I paste it into the console. How do I make it work without doing that? ....Thanks :) – Whitney Lewis Apr 21 '16 at 20:28
  • @WhitneyLewis Try surrounding that active link code with this: `$(document).ready(function() { // add code here });` I'm pretty sure what's happening is that the document has not been fully loaded when you're running that code. Let me know if this works for you. – Andy Hoffman Apr 22 '16 at 00:03
  • 1
    THAT WORKED!!! ANDY HOFFMAN, YOU ARE THE MAN!!!!!! Thank you so so so so so much! – Whitney Lewis Apr 22 '16 at 00:17