Javascript 粘性导航条，但有边距

我尝试在用户滚动时使用粘性导航栏，但是当第一次登录页面时，导航栏顶部有一个10px的小边距（导航栏顶部和页面顶部之间的间隙）。当它向下滚动超过10px时，它会粘在页面顶部

我参考了本教程，并尝试在不使用标题的情况下对其进行调整：

然而，我不能得到一个平滑的滚动，我认为这是因为我不能正确地适应如何在jquery代码中获得“hdr”的值；而不是主导航的高度，我只想得到机身顶部的填充值，它是10px。这是我的问题吗

我只是感到沮丧，因为我似乎无法理解如何寻找正确的答案（如果我甚至确定了正确的问题）。任何建议都将不胜感激

css:

jquery：

var  mn = $(".main-nav");
mns = "main-nav-scrolled";
hdr = $('.main-nav').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > hdr ) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});

---

天哪，别担心。我想出来了。我只需要将其替换为像素值10！！不过，如果有人有其他资源是好的阅读，请让我知道

var  mn = $(".main-nav");
mns = "main-nav-scrolled";

$(window).scroll(function() {
  if( $(this).scrollTop() > 10 ) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});

---

请添加一个JSFIDLE:）

var  mn = $(".main-nav");
mns = "main-nav-scrolled";

$(window).scroll(function() {
  if( $(this).scrollTop() > 10 ) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});