导航上方的对象，但导航应位于对象之上

Question

我编写了这段代码，以便当用户在我的网站上时，导航将在滚动时跟随它们。它工作正常，但很少有实例，对象将浮动在导航的顶部，它将隐藏在它们后面。这是一个jsfiddle。

https://jsfiddle.net/b24fgsf3/

当您在某个点滚动导航按钮到页面顶部时，您会注意到，但是导航顶部仍然可以看到h1标签，并且它会短暂隐藏导航选项。非常讨厌，我认为这是糟糕的用户体验/用户界面。我已经玩过这些职位和其他一些属性，但我无法正常工作。

任何建议都将不胜感激。

这是我写的jQuery。因为我显然没有发布任何东西。

var num = 15;

$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
    $('nav').addClass('fixed');
} else {
    $('nav').removeClass('fixed');
}
});