不同方向的两个粘性div [重复]答案

【问题标题】：Two sticky divs in different directions [duplicate]不同方向的两个粘性div [重复]
【发布时间】：2020-01-12 15:24:55
【问题描述】：

我正在尝试制作一个界面，其中两个部分重叠，一个可以水平滚动第一部分，垂直滚动第二部分。我很快就发现了 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 会“卡住”到一半（但我希望它的行为与红色一样）

我完全不理解这种行为。

【问题讨论】：

您需要在此处在您的问题中发布minimal reproducible example，而不是指向您的网站或任何第三方网站的链接。
我不知道，修好了

标签： html css scroll sticky

【解决方案1】：

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

【讨论】：

【解决方案2】：

主体需要宽度，或者您需要不粘的元素来创建该宽度。否则你的 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>

【讨论】：