Clicking on nav link doesn't apply active style

[charliefisher]

Hi this is super helpful, but I've hit an issue with applying active styles. I tried to set up a repl.it to reproduce this issue, but this package isn't supported on Linux.

I have an <a> tag with a link to an id. When I click it, it appears to properly scroll to the link, but doesn't apply the active style.
I am on Windows 64 bit, Chrome version 80.0.3987.149.

After a little debugging, I figured out this was happening because window.scrollTo is not actually scrolling to the exact coordinates given as parameters (I'm not sure why that happens though). The element has a pageYOffset of 727. I'm not sure what the most appropriate fix is for this, I was able to resolve this issue locally by doing:

 let animateScroll = () => {
     currentTime += increment;
     let val = this.easeInOutQuad(currentTime, start, change, duration);
     window.scrollTo(0, val);
     if(currentTime < duration) {
          setTimeout(animateScroll, increment);
     }
//------------- My Proposed Change ---------------
     else if (window.pageYOffset < to) {
//          console.log('Last scroll iteration, somehow did not finish scroll. Currently at position', window.pageYOffset)
          // for the element at a height of 727, it always was 726.7999877929688

          // note I got 0.4 from experimentation (I don't know if this is a reasonable value)
          window.scrollTo(0, window.pageYOffset + 0.4);
     }
//------------- End Proposed Change --------------
};

An alternative solution would be to change the condition at line 48 of ScrollSpyNav.js to check for proximity within some epsilon of the element's location.

Let me know what you think and then I can go ahead and PR a fix.

[StephenWeiXu]

@charliefisher Hi there, there is a component prop offset you can pass to adjust the start of the section you are scrolling to. That would be a better solution than hardcoding a 0.4 value in here. See where the offset parameter is used

If you have trouble seeing the active style being applied to the <a> link, make sure you pass the component prop activeNavClass, and implement proper css styling for that class.