如何在用户位于页面顶部时显示白色部分？

Question

这就是我构建背景的方式我想知道如何获取它，以便当用户滚动顶部的白色时将匹配蓝色。顶部的白色只应在页面顶部显示。

任何帮助都将不胜感激。

{{1}}

Answer 1

这样做的一种方法是给#bg-top一个固定的height和position:absolute - 翻转你的例子

从一些浏览器默认重置开始，如下所示：

* {
  margin: 0;
  box-sizing: border-box
}

然后，您可以将#bg-top和#bg-bottom设为白色background

对于position：absolute，#bg-top和top:0不会滚动内容，并会保留在页面顶部。

然后，您可以将background-color的{​​{1}}变成您想要的蓝色。

body与#bg-bottom和position: absolute相同，它不会滚动内容，并会保留在页面底部。

这也可以用JS

完成

Basic Pure CSS示例：

＆＃13;

＆＃13;

bottom:0

＆＃13;

* {
  margin: 0;
  box-sizing: border-box
}

body {
  background-color: #00b9ff;
  position: relative;
}

p {
  width: 20px;
}

#bg-top,
#bg-bottom {
  background-color: #ffffff;
  position: absolute;
  left: 0;
  width: 100%;
  z-index: -1
}

#bg-top {
  top: 0;
  height: 80px;
}

#bg-bottom {
  bottom: 0;
  height: 80px;
}

＆＃13;

＆＃13;

＆＃13;