javascript - 跳转导航栏问题

Question

我的问题很复杂(至少很难解释)。

我有一个响应式导航栏，默认情况下它不在页面顶部，但您必须向下滚动一点才能使导航栏到达浏览器窗口的顶部。

在桌面 (48em<) 上，可以简单地滚动浏览导航栏(因此向下滚动时它会消失)，但是当向上滚动时，它会获得一个“粘性”类(感谢 JS)并出现在顶部。

在移动设备上，一旦滚动位置到达导航栏元素，导航栏就会变粘。

我的问题是移动 View 。我不得不添加一段 CSS 代码，以便页面内容在向下滚动时不会闪烁(跳跃)。 (我只有在JS添加sticky类的时候才需要)

.sticky + .content {
  padding-top: 58px;
}

当汉堡包菜单关闭时，它工作得很好。

当菜单打开时，导航栏的高度会发生变化，并且需要在顶部填充更多内容才能不使页面内容跳转。请参阅下面的 gif。 🤔

如果我将此内边距更改为 248px，则菜单打开时内容不会跳转，但关闭时会跳转。 🤦‍♂️

.sticky + .content {
  padding-top: 248px;
}

我想我应该写一段 JS 代码来做到这一点:

• 如果选中导航复选框，则更改 .sticky + .content {padding-top: 248px;}

• 如果未选中，将其改回 .sticky + .content {padding-top: 58px;}

• 所有这些都在 48em 以下。在桌面上，填充应该为 0。

这是一个 fiddle 代码: https://jsfiddle.net/zsoltszilvai/t0zLv7yn/48/

我对 JS 了解不多，所以任何帮助将不胜感激。

Answer 1

问题不在 padding-top 中。实际上你不应该操作你的 sticky 类。 CSS position: sticky 自动为您完成所有工作。您必须解决 3 件事:

1. 您不需要在滚动时切换 .sticky 类。您必须删除此代码:

// You don't need this all
if (window.pageYOffset > sticky) {
  header.classList.add("sticky");
} else {
  header.classList.remove("sticky");
}

1. 您永久添加类sticky到header

<header class="header sticky" id="navbar">

1. 您删除

@media (max-width: 767px) {
  .sticky {
  /* position: fixed; You don't need this */
  }
}

检查这个 fiddle : https://jsfiddle.net/tyminko/coetd4jx/1/