跳转导航栏问题

Question

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

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

在桌面(48em<)上，你可以简单地滚动导航条(所以它在向下滚动时就会消失)，但是当滚动回滚时，它会得到一个“粘性”类(感谢JS)并出现在顶部。

在移动平台上，一旦滚动位置到达导航条元素，导航条就会变粘。

我的问题是移动视图。我必须添加一段CSS代码，这样页面内容在向下滚动时不会闪烁(跳转)。(我只在JS添加粘性类时才需要它。)

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

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

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

​

​

如果我将这个填充更改为248 it，那么当菜单打开时，内容不会跳转，而是在菜单关闭时跳。‍♂️

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

​

​

我想我应该编写一段JS代码这样做：

选中

• 如果选中nav复选框，则更改.sticky + .content {padding:248 If；}
• (如果未选中)，将其更改为.sticky + .content {padding:58 If；}
• ，这一切仅在48 If以下。在桌面上，填充应该是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");
}

将header中的类sticky添加到中

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

1. You remove

@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;
}

​

​