固定位置导航在滚动时进出闪烁

Question

长期学习，第一次张贴。

我正在使用一些 jquery 来添加 class - 'sticky-header' - 到网站的 header。 Sticky-header 使 header 随用户滚动。这是我的 CSS:

.sticky-header {
 z-index: 99999;
 position: fixed;
 width: 100%;
 border-bottom: 1px solid #ccc;
 min-height: 60px !important;
 background: #fff;
}

我已经多次使用相同的 Genesis 主题设置此设置，效果非常好。然而，对于这个应用程序，一些奇怪的事情正在发生。当您滚动时，header 会闪烁，并与其下方的元素进行交互。

header 中闪烁和闪烁的部分总是一致的，就好像它被一个看不见的页面元素打断了一样。我找不到任何会导致此行为的整个站点中一致的页面元素。

我想知道你们这些好人是否可以向我指出一些问题，或者知道我正在尝试使用的 CSS 的某些方面导致显示混乱。

Answer 1

您还必须在包装器 div 上设置宽度和位置，因为您将浮动到一边并将其设置为 50% 的宽度。

由于包装器 div 没有设置宽度，包装器不知道要采用什么宽度（50% 的宽度？）。 wrapper div 也需要相对于header位置来继承z-index。我使用了下面的代码，它解决了这个问题。

.sticky-header .wrap {
  padding: 10px 0px;
  width: 100%;
  position: relative;
}

Fixed Position Nav flickers in and out on scroll