Question

我有两列布局，我希望右列为position: sticky，以便在滚动较长的左列时它保持可见。

这是两个引导程序列，所以我要做的第一件事是删除浮点数（而是使用display: inline-block）。

这本身可以很好地工作，也可以在此特定页面的DOM顶部附近工作，但是在呈现的位置（可惜的是，它的深度大约是30 divs ...不要问... ）我无法正常工作。两列都继续滚动。

我知道父元素是否具有除overflow以外的visible属性，它可以破坏position: sticky，但这在这里似乎不是问题。是不是如果链中的 any 父元素具有溢出集，它可能会破坏粘性定位？

我只是确定在这种情况下要寻找的内容，以确定在这种情况下有什么破坏方法。粘性定位还有其他需要注意的关键事项吗？

编辑：我改掉了我的问题，因为它确实出现了（经过进一步的调查和测试），该问题是DOM顶部附近的父元素设置为overflow-x: hidden。由于这是共享代码，因此我必须找出原因以及原因。

但是...在此期间，是否有任何已知的解决方法...在哪里可以将DOM树下的元素用作定位为粘性项目的包含元素？

在下面的示例中，如果您从.theproblem中消除了溢出，则页面的行为将与我想要的一样（滚动页面时右列“粘住”）。

.theproblem {
  overflow-x: hidden;
}

.column {
  display: inline-block;
  width: 45%;
  vertical-align: top;
}

.column1 {
  border: 1px solid red;
  height: 1000px;
}

.column2 {
  border: 1px solid green;
  position: sticky;
  top: 1px;
}

<div class="theproblem">
  <div class="columnwrapper">
    <div class="column column1">
      This is column 1 (the tall one)
    </div>
    <div class="column column2">
      This is column 2 (the sticky one)
    </div>
  </div>
</div>

JSBin link

Answer 1

您已经注意到粘滞位置和滚动之间的任何溢出属性都会破坏粘滞位置（在此处Why is 'position: sticky' not working with Core UI's Bootstrap CSS和此处What are `scrolling boxes`?进行解释）。

您遇到的一种解决方法是将滚动条移动到另一个元素并隐藏默认元素：

.theproblem {
  overflow-x: hidden;
}
/* Added this */
.columnwrapper {
  height:100vh;
  overflow:auto;
}
body {
  overflow:hidden;
  margin:0;
}
/**/

.column {
  display: inline-block;
  width: 45%;
  vertical-align: top;
}

.column1 {
  border: 1px solid red;
  height: 1000px;
}

.column2 {
  border: 1px solid green;
  position: sticky;
  top: 1px;
}

<div class="theproblem">
  <div class="columnwrapper">
    <div class="column column1">
      This is column 1 (the tall one)
    </div>
    <div class="column column2">
      This is column 2 (the sticky one)
    </div>
  </div>
</div>

是否有可能用“位置：粘性”来取代“溢出：隐藏的”父母？

1 个答案: