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。当菜单在视图外滚动时，您将其位置更改为固定。一旦它回到原来的位置，就可以移除固定位置。

您希望在滚动执行的方法中尽可能少地执行，因为它经常被触发。一旦滚动上的代码执行太多，您就会失去平滑的60fps帧速率。

所以你能做的是：

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

以下是一个例子：

$(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>

Answer 2

相反$（window）在$（document）上设置得更好： $（＆＃39;＃navigationsleiste＆＃39;）。css（＆＃39; top＆＃39;，$（document）.scrollTop（））;

滚动位置后的粘性导航

2 个答案: