Question

我的angular 6项目中有一个flexbox导航菜单，我想在菜单顶部粘稠时更改背景颜色。

这就是我想要的[样本]， Expected result

这是我到目前为止所拥有的：

这是使用position: sticky

的粘滞菜单的css

.main-nav-sticky{
  background-color: white;
}

.main-nav {
  margin-top: 100px;
  position: sticky;
  align-items: center;
  justify-content: space-around;
  top: 0;
  left: 0;
  display: flex;
  height: auto;
  width: 100%;
  color: green;
}

我只希望当用户滚动并且菜单位于顶部时，菜单导航应该具有background-color: white

我的代码中缺少什么？是新手吗？

Answer 1

正如基诺所说，您的媒体查询中的position: inherit超出了position: sticky的范围。

但是根据MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/position），使用position: sticky只会使相对于父对象的“粘滞”不影响窗口

粘性定位元素是其计算出的位置值为粘性的元素。它被视为相对定位，直到其包含的块在其流根（或在其中滚动的容器）内超过指定的阈值（例如，将top设置为auto以外的值），在该点处将其视为“卡住”，直到达到其包含块的相对边缘。

要实现所需的行为，您应该使用position: fixed，该值取决于MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/position）

它是[元素]相对于视口建立的初始包含块的位置。

因此您的CSS应该是

.main-nav-sticky {
   background-color: white;
}

.main-nav {
  margin-top: 100px;
  position: fixed;
  align-items: center;
  justify-content: space-around;
  top: 0;
  left: 0;
  display: flex;
  height: auto;
  width: 100%;
  color: green;
}

关于在用户滚动时更改导航栏的颜色，您将需要 javascript以检测滚动事件并相应地更改颜色。

Answer 2

您有一个媒体查询，干扰了较小屏幕上的定位。直到到达其父容器的末尾为止，它都是粘性的。

@media only screen and (max-width: 768px) {
  .main-nav {
     margin: 0;
     display: block;
     /* position: inherit; This is the problem */
   }
}

向下滚动而不使用jQuery时，粘性菜单会更改颜色

2 个答案: