Please help me with my Bootstrap Nav (Dataspy + scroll)

Hi Everyone,

I’m working on my portfolio project and I’m having a couple of issues with my Nav bar. After reaong documentation, I figured out how to scroll to certain sections my clicking item, and how to make that menu item active by scrolling to it, just like the example. However, there are a couple of issue.

With the Dataspy scrolling:
-When the Page is first loaded, the active menu item is the last one, not the first.
-When I scroll down and then back to the top, none of the menu items are active (The first on should be)

With the jquery listeners (To scroll my clicking the menu):
-It cause the screen to scroll lower than it should

Can you please help me with these? My codepen link is below.

Thank you!

you create div.body and add data-spy to it then address to <body> tag in your code
check fullscreen version of you pen when it loads top is axtive but in some time it switches to contacts
you will have to think abt offsets too
just a couple of thoughts