Question

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

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

这是我的粘性代码。

$(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类之外没有固定高度。

谢谢！

Answer 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标记。现在，当我点击汉堡包导航时，屏幕不再跳到顶部。

粘性导航在响应性方面跃居首位

1 个答案: