两个不同方向的粘性 div

Question

我正在尝试创建一个界面，其中两个部分重叠，可以水平滚动第一部分，垂直滚动第二部分。我很快就发现了css置顶位置

这是演示我在使用 position: sticky; 时遇到的问题的代码：

body {
  margin: 0;
}

#d1 {
  background: red;
  position: sticky;
  top: 0;
  width: 2000px;
  height: 50px;
  opacity: 0.8;
}

#d2 {
  background: blue;
  position: sticky;
  left: 0;
  width: 50px;
  height: 2000px;
  opacity: 0.8;
}

<div id="d1"></div>
<div id="d2"></div>

（在我的浏览器中不起作用，这是一个 jsfiddle https://jsfiddle.net/2bovgy84/1/）

如果你向下滚动红色 div 保持在顶部（我所期望的），但是如果你向右滚动蓝色 div 得到 "stuck" 中途（但我期望它表现得像红色的一样）

我完全不理解这种行为。

Answer 1

body 需要宽度，或者您需要不粘的元素来创建该宽度。否则，您的 body 将是视口的宽度。

https://jsfiddle.net/y9r74c0x/20/

body {
  margin: 0;
  width: 2000px;
}

#d1 {
  background: red;
  position: sticky;
  bottom: 0;
  width: 2000px;
  height: 50px;
  opacity: 0.8;
}

#d2 {
  background: blue;
  position: sticky;
  right: 0;
  width: 50px;
  height: 2000px;
  opacity: 0.8;
}

<div id="d1"></div>
<div id="d2"></div>

Answer 2

body 需要被允许变得比 HTML/window 的宽度更宽，这样它就不会拖动蓝色元素（html/body 上的背景显示发生了什么： https://jsfiddle.net/Lq473pue/1/ ).

你可以使用：

display:inline-block;
display:table;
float:left;

jsfiddle 已更新：https://jsfiddle.net/Lq473pue/

min-width:100%; 也可以方便 body

两个不同方向的粘性 div

Two sticky divs in different directions

html

css

scroll

sticky