Question

在this website上，我的导航栏在顶部。现在，使用jQuery，通过添加一个名为.shrink的CSS类来使导航栏更小当scrollTop大于100px时。该功能本身可以正常工作。应用了该类，并且导航栏变小了，但是我面临一个断断续续的问题。如果您从顶部稍微滚动一下（我相信大约100像素），则导航栏会开始上下跳跃，所有这些都很疯狂。我不知道是什么原因导致了该问题，也不知道如何解决该问题。有人知道解决方案吗？

$(document).on("scroll", function() {
  if ($(document).scrollTop() > 100) {
    $("header").addClass("shrink");
  } else {
    $("header").removeClass("shrink");
  }
});

header.is-fixed {
  position: sticky;
  z-index: 9999;
  left: 0;
  right: 0;
  top: 0;
  padding: 1.5rem 0;
  transition: 0.2s;
  background-color: #333;
}

header.shrink {
  padding: 0.75rem 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="is-fixed">
  <div class="container">
    <nav class="navbar" role="navigation" aria-label="main navigation">
      Content here
    </nav>
  </div>
</header>
<div style="height:2000px; background-color:red">
</div>

Answer 1

首先，当您使用非常敏感的滚动外围设备（如mac触控板）时，最有可能出现此错误。使用普通鼠标滚轮可以大大降低这种机会。

现在输入代码。

您需要使用position：fixed;在导航栏上，由于位置粘滞会自动改变自身的scrollTop计算，使补全进入某种循环，除了位置固定外，还需要考虑滚动位置0上内容的偏移量，因为位置固定不会压低下一个孩子，请使用边距顶部之类的东西

我已经在您的网站上使用chrome inspector进行了测试， 'header.is-fixed'固定位置，并向此类的firts部分添加102px的空白 '英雄is-medium以文本为中心-移动has-bg-img has以文本为中心' 不再有错误

希望这会有所帮助

使用jQuery的奇怪导航栏结结巴

1 个答案: