javascript - 粘性导航栏但有边距

Question

我试图在用户滚动时有一个粘性导航栏，但是当第一次登陆页面时，导航栏顶部有一个 10px 的小边距(导航栏顶部和这一页)。当它向下滚动超过 10px 时，它会停留在页面顶部。

我指的是本教程并尝试在不使用标题的情况下对其进行调整:http://codepen.io/anon/pen/wavyZL

但是，我无法获得平滑的滚动，我认为这是因为我无法正确调整如何在“hdr”的 jquery 代码中获取值；而不是主导航的高度，我只想获得 body 的 padding-top 的值，即 10px。这是我的问题吗？

我只是很沮丧，因为我似乎无法理解如何搜索正确的答案(如果我什至确定了正确的问题)。任何建议表示赞赏。

CSS:

body {
  margin: 0;
  padding-top:10px;
}
.main-nav,
.main {
  position: relative; 
}
.main-nav {
  background: red;
  height: 50px;
  z-index: 150;
  margin-bottom: -50px;
  box-shadow: 0 2px 3px rgba(0,0,0,.4);
}
.main-nav-scrolled {
  position: fixed;
  width: 100%;
  top: 0;
    }
.main {
  background: #f2f2e8;
  padding: 100px 
}

j查询:

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);
  }
});

Answer 1

天哪，没关系。我想到了。我只需要将它替换为 10 的像素值!!不过，如果有人有其他值得一读的资源，请告诉我。

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

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