跳转导航栏问题

Question

我的问题很复杂（至少很难解释）。

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

在桌面 (48em

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

我的问题在于移动视图。我必须添加一段 CSS 代码，以便向下滚动时页面内容不会闪烁（跳跃）。 （我只有在JS添加粘性类时才需要它。）

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

当汉堡菜单关闭时效果很好。

当菜单打开时，导航栏的高度会发生变化，它需要在顶部增加更多的填充，以免页面内容跳转。请参阅下面的 gif。 ????

如果我将此填充更改为 248 像素，则在打开菜单时内容不会跳转，但在关闭时会跳转。 ????‍♂️

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

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

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

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

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

下面是代码： https://jsfiddle.net/zsoltszilvai/t0zLv7yn/48/

我对 JS 了解不多，因此不胜感激。

Answer 1

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

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 */
  }
}

检查这个小提琴： https://jsfiddle.net/tyminko/coetd4jx/1/

Answer 2

您问题的现代答案是使用绝对定位子菜单。

.big-wrapper-main {
    position: relative;
}

.menu {
    position: absolute;
    top: 100%; 
    left: 0;
    width: 100%;
    z-index: 5;
    background-color: white;
}

以这种方式定位的子菜单不会改变父级的高度，而是位于它之后（因为顶部：100% - 100% 代表父级的 100% 高度）。

问题是您正在使用float 和clear，而我们暂时不在Web 开发中这样做，并且您的.big-wrapper-main 的高度是0px，因此您必须添加相对位置到#navbar（未修复时）。

我必须添加 .header.sticky 来覆盖相对位置。

.header.sticky {
    position: fixed;
}