Question

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

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

但是，我无法获得平滑的滚动，我认为这是因为我无法正确调整如何获取“hdr”的jquery代码中的值;而不是主导航的高度，我只想得到身体的填充顶部的值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 
}

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

Answer 1

omg nevermind。我想到了。我只需用10的像素值替换它！不过，如果有人有其他资源是好的读物，请告诉我。

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

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

粘性导航栏但有边距

1 个答案: