粘性导航在响应时跳转到顶部答案

【问题标题】：Sticky Navigation Jumps to Top on Responsive粘性导航在响应时跳转到顶部
【发布时间】：2015-08-14 20:41:18
【问题描述】：

我创建了一个带有下拉菜单的响应式导航，一切正常。我正在努力让它变得粘稠，就像在你滚动到某个点之后，它会固定在顶部。

它工作正常，除非您调整页面大小直到出现响应式汉堡菜单并单击它。然后页面跳转到顶部。

这是我的粘性代码。

$(window).scroll(function () {
  if ($(window).scrollTop() >= $("header").height() + 30) {
    $(".sticky").addClass("fixed");
    $(".content").addClass("margin");

  } else {
    $(".sticky").removeClass("fixed");
    $(".content").removeClass("margin");
  }
});

这是我的 CSS 汉堡所在的地方。

.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: #efefef;
  height: 70px;
  width: 70px;
}

这是导航栏的代码。

<section class="navigation sticky">
  <div class="nav-container">
    <div class="brand">
      <a href="index.html">Primitive</a>
    </div>
    <nav>
      <div class="nav-mobile"><a id="nav-toggle" href="#"><span></span></a></div>
      <ul class="nav-list">
        <li>
          <a href="index.html">Home</a>
        </li>
      </ul>
    </nav>
  </div>
</section>

在sticky 类之外没有固定的高度。

谢谢！

【问题讨论】：

附加在 URL 上的 # 将页面发送回顶部。使用e.stopPropagation()之类的东西，并将事件添加到主函数中：.scroll(function(e){}
做到了！非常感谢！
@yak613 不应该是e.preventDefault()吗？
@TaniaRascia 我不知道那个把戏。是标准的吗？
您实际上应该通过答案来解决这个问题，这样人们才能获得代表等......所以像我这样的人认为它仍然没有答案。 :)

标签： javascript jquery html css nav

【解决方案1】：

这里是固定代码。

<section class="navigation sticky">
  <div class="nav-container">
    <div class="brand">
      <a href="index.html">Primitive</a>
    </div>
    <nav>
      <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
      <ul class="nav-list">
        <li>
          <a href="index.html">Home</a>
        </li>
      </ul>
    </nav>
  </div>
</section>

要防止在单击切换时发生操作，请将href="#!" 添加到a 标记。现在，当我单击汉堡导航时，屏幕不再跳到顶部。

【讨论】：