javascript - 滚动位置后的粘性导航

Question

在以下网站上，我有一个导航栏。 http://bit.do/bVXAs

我将此 CSS 代码用于导航:

z-index: 999;
position: relative;
background: #302f2f; /* Old browsers */
background: -moz-linear-gradient(top,  #302f2f 0%, #000000 100%);
background: -webkit-linear-gradient(top,  #302f2f 0%,#000000 100%);
background: linear-gradient(to bottom,  #302f2f 0%,#000000 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#302f2f', 
endColorstr='#000000',GradientType=0 ); /* IE6-9 */
box-shadow: 0px 7px 31px -5px #000;
border-bottom: 15px solid #ff9500;s

我为固定位置使用 Javascript 代码:

$(window).scroll(function () {
if ($(window).scrollTop() > 1) {
    $('#navigationsleiste').css('top', $(window).scrollTop());
}
}

现在，当我滚动导航栏时，浏览器窗口顶部有一个空间。但我不想要那个空间/差距。谁知道为什么我有那个间隙/空间？

Answer 1

我相信评论中已经回答了“为什么存在差距”的问题。

更一般地说，关于如何解决问题:

CSS 有一个非常适合粘性菜单的 position 属性:position: fixed。当菜单滚动到 View 之外时，您将其位置更改为固定。一旦它回到原来的位置，您就可以删除固定位置。

您希望在滚动时执行的方法中做的事情尽可能少，因为它经常被触发。一旦滚动条上的代码执行过多，您就会失去流畅的 60fps 帧率。

所以你可以做的是:

• 确保您始终知道粘性菜单的顶部距离窗口顶部有多远
• 滚动时，检查是否已达到此点
• 相应地在您的菜单中添加或删除类(class)

这是一个例子:

$(document).ready(function() {
  var $doc = $(document);
  var $menu = $("nav");
  var menuTop = 0;

  var setMenuTop = function() {
    menuTop = $menu.offset().top;
  }

  $(window).resize(setMenuTop);

  $doc.scroll(function() {
    $menu.toggleClass("is-fixed", ($doc.scrollTop() > menuTop));
  });

  setMenuTop();
});

body {
  width: 400px;
  margin: 0 auto;
}
header {
  height: 160px;
  background: orange;
}
nav {
  heigth: 40px;
  background: yellow;
  will-change: transform;
}
nav.is-fixed {
  position: fixed;
  width: 400px;
  top: 0;
}

.is-fixed + article {
  margin-top: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>header</header>
<nav>menu</nav>
<article>
  <h1>content</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nulla enim placeat? Iure modi quasi facere provident, quidem ducimus impedit nulla harum sunt corrupti. Rem velit architecto omnis molestias, repellat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nulla enim placeat? Iure modi quasi facere provident, quidem ducimus impedit nulla harum sunt corrupti. Rem velit architecto omnis molestias, repellat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nulla enim placeat? Iure modi quasi facere provident, quidem ducimus impedit nulla harum sunt corrupti. Rem velit architecto omnis molestias, repellat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nulla enim placeat? Iure modi quasi facere provident, quidem ducimus impedit nulla harum sunt corrupti. Rem velit architecto omnis molestias, repellat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nulla enim placeat? Iure modi quasi facere provident, quidem ducimus impedit nulla harum sunt corrupti. Rem velit architecto omnis molestias, repellat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nulla enim placeat? Iure modi quasi facere provident, quidem ducimus impedit nulla harum sunt corrupti. Rem velit architecto omnis molestias, repellat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nulla enim placeat? Iure modi quasi facere provident, quidem ducimus impedit nulla harum sunt corrupti. Rem velit architecto omnis molestias, repellat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nulla enim placeat? Iure modi quasi facere provident, quidem ducimus impedit nulla harum sunt corrupti. Rem velit architecto omnis molestias, repellat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nulla enim placeat? Iure modi quasi facere provident, quidem ducimus impedit nulla harum sunt corrupti. Rem velit architecto omnis molestias, repellat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nulla enim placeat? Iure modi quasi facere provident, quidem ducimus impedit nulla harum sunt corrupti. Rem velit architecto omnis molestias, repellat.</p>
</article>