代码之家 › 专栏 › 技术社区 › DA.

用深度嵌套的“位置:粘滞”检查什么不起作用?

sticky position css

0

DA. · 技术社区 · 6 年前

position: sticky 所以当滚动较长的左边列时,它会停留在视图中。

这是两个引导列,所以我要做的第一件事就是移除浮动(而不是使用 display: inline-block ).

我知道父元素是否有 overflow 不动产 visible 位置:粘性 但这似乎不是问题所在。是不是如果

我只是确定在这种情况下要寻找什么,以确定在这种情况下是什么打破了它。当涉及到粘性定位时,还有其他需要注意的关键问题吗?

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

0 回复 | 直到 6 年前

1

Temani Afif 6 年前

正如您已经注意到的,粘滞位置和卷轴之间的任何溢出属性都会破坏它(这里解释: 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>