Don't highlight the first item until the user has reached it

[dreamawakening]

I have the following sections on my page:

1. intro
2. skillset
3. values
4. showcase
5. my-story

My navbar has a link for all of these items, except for intro, which I'm not using in this case:

<Scrollspy
  className="navbar-nav ml-auto"
  currentClassName="active"
  items={['skillset', 'values', 'showcase', 'my-story']}
  offset={-100}
>
  Links ...
</Scrollspy>

If the user is inside the intro section, but behind the skillset section, it'll apply the currentClassName to skillset (the first item in items). This shouldn't happen until the user is there.

Adding intro to the ScrollSpy (a link and item to its items prop) fixes this. So as a workaround I've done this but used display: none on it so it doesn't show.

[dncdrn]

I think we have the same problem, What i did was i added a margin on top for div content that has an id.