Sticky scroll nav menu - html

Question

Currently, I'm working on the single webpage and got some issue with the final output which is when clicking the link menu, it does not go to the targeted div position(correct me if I'm wrong). And when clicking again the link, it will go to the other position.
I follow this tutorial, callmenick
Here is the reproduction of it, jsfiddle
<nav>
<ul>
<li>Overview</li> <- when any click link, and then click again, there's some action happen. *bugs?*
<li>Tech Spec</li>
<li>Support</li>
</ul>
</nav>

Answer 1

Now I get it,
the Problem is that the fixed nav is not part of the document flow anymore.
Therefore it won't reserve height. Or in other words the rest of the elements don't know its there anymore. Just like display: none;
You need to find a way to push the elements down by the height of the fixed nav but only if the nav is fixed.
There are a couple ways to to that, but it depends on the layout.
First way that comes to mind is applying padding-top: ?px; to the #product-nav, via JS as soon as fixed is applied to the nav.
edit:
https://jsfiddle.net/ju648br4/4/

Answer 2

I see no issue on my machine, but this feature can be approached in a different way. See my example below, this might solve the issue
Add anchor class
Add data attribute
Make global function that scrolls to certain point
So for instance
<div id="button-name"></div>
becomes
<div id="button-name" class="scrollAnchor" data-anchor-dest="#section-more-info"></div>
Now there is a JavaScript action required, this one reads the data-anchor-dest attribute and scrolls to it.
$(".scrollAnchor").click(function(e){
e.preventDefault();
anchorDestination = $(this).data("anchor-dest");
smoothScrollTo(anchorDestination);
});
function smoothScrollTo(element)
{
$("html, body").stop().animate({
scrollTop: $(element).offset().top
}, 1000);
}
Now the usual question, how compatible is it? This compatible, I have tested this myself in IE9 and it works.
This answer may be more of a teardown than a fix, but I hope this helps

Answer 3

What you need to do is to add your missing Buy section and in your navigation add href to the link, like:
<nav>
<ul>
<li>Overview</li>
<li>Tech Spec</li>
<li>Support</li>
<li>Buy</li> <!-- You are missing your href attribute here -->
</ul>
</nav>
All the rest seems to work fine.