Question

下面我有一个页脚，它是深紫色。当我滚过页脚的末端时，它是白色的。如何更改此白色以匹配页脚颜色，而不更改我顶部所有内容的背景颜色？

我只希望在用户尝试滚动页脚时显示此颜色，而不是文档中的任何其他位置（例如，当用户尝试在导航栏上方滚动时）。

使用html {background-color: purple}颜色整个文档，包括顶部，但我希望此颜色仅显示在底部。

使用html {background: linear-gradient(white, purple)}会在整个页面上留下一个渐变，但更重要的是，它会在 top 和 white 底部显示紫色。

编辑（更好的示例）

考虑https://codepen.io。访问主页。现在，当您尝试在导航栏上方滚动时，它会显示深灰色。当您尝试在页脚下方滚动时，它也会显示深灰色。现在我想要做的是当用户滚动浏览页脚时显示颜色，而不是导航。

Answer 1

听起来好像你的问题来自两种类型的内容;定义的内容部分，具有自己的背景颜色，然后直接坐在正文上的未定义内容。我认为它看起来像这样：

body {
  margin: 0;
  background: yellow;
}

.content {
  height: 1900px;
  background: white;
}

<body>
  Header content
  <div class="content"></div>
  Footer content
</body>

请注意，如果我要更改“标题”的颜色，页脚将也更改颜色。你试图用线性渐变来解决这个问题，但问题不在于颜色;这是布局。

您要做的是将内容的每个部分分解为自己的<div>。这样，您可以为每个单独部分设置样式，允许您为页眉和页脚设置不同的颜色：

header {
  height: 50px;
  background: yellow;
}

.content {
  height: 1000px;
}

footer {
  height: 50px;
  background: purple;
}

body {
  margin: 0px;
}

<header></header>
<div class="content"></div>
<footer></footer>

请注意，如果您能够在某些网站上滚动页脚，这可能来自于手机可以在其滚动效果上“摇摆”到底部的事实。这个“额外”内容不存在，并且是手机生成的空白，试图“赶上”页面底部的位置。

您可以直接在background上设置html属性的颜色来控制那种颜色。只要您的所有“实际”内容覆盖 html中设置的颜色，您就可以将此颜色设置为您想要的颜色。但是，它确实不需要担心，可以安全地保留为默认白色。

希望这有帮助！：）

如何更改浏览器窗口下方的颜色以匹配页脚

1 个答案: