为啥“位置：粘性”不适用于 Core UI Bootstrap CSS

Posted 2023-02-21

【中文标题】为啥“位置：粘性”不适用于 Core UI Bootstrap CSS

【英文标题】：Why is 'position: sticky' not working with Core UI's Bootstrap CSS为什么“位置：粘性”不适用于 Core UI Bootstrap CSS

【发布时间】：2019-07-15 05:01:18

【问题描述】：

我正在尝试使用 Core UI's 找到的 here 反应模板构建反应仪表板。

CSS

.top-stick 
    position: sticky !important;
    position: -webkit-sticky;
    top: 5rem;
    overflow-y: auto;
    height: calc(100vh - 5rem);

JSX

<div className="animated fadeIn">
  <Row className="app-scrollable-body">
    <Col xs="12" sm="4" md="3" className="top-stick">
      <Card className="toic">
        <CardBody>
          Lorem ipsum dolor sit amet
        </CardBody>
      </Card>
    </Col>
    <Col xs="12" sm="8" md="9">
      <Card>
        <CardHeader>Card title</CardHeader>
        <CardBody>
        Lorem ipsum dolor sit amet
        </CardBody>
      </Card>
    </Col>
  </Row>
  <div className="app-fixed-footer">
    <span>
      <a href="https://coreui.io">CoreUI</a> &copy; 2018
      creativeLabs.
    </span>
    <span className="ml-auto">
      Powered by" "
      <a href="https://coreui.io/react">CoreUI for React</a>
    </span>
  </div>
</div>

但在滚动时卡片似乎没有粘住。

在inspecting 上，CSS 存在。在CSS 树中也没有overflow: hidden。

【参考方案1】：

问题是在.app-body 中使用溢出。这有点棘手，但不应为具有滚动和粘性元素的元素之间的任何元素设置overflow 属性。

这里有一个基本的例子来说明。滚动条在视口上，我们有一个带有overflow:hidden（甚至auto）的包装器，因此粘性行为不起作用。

.container 
  display:flex;
  align-items:flex-start;
  border:2px solid green;

.content 
  flex:1;
  height:200vh;
  background:red;
  margin:10px;

.sticky 
  flex:1;
  height:100px;
  background:blue;
  margin:10px;
  position:sticky;
  top:0;


.wrapper 
  overflow:hidden;
  border:2px solid red;

<div class="wrapper">
  <div class="container">
    <div class="sticky"></div>
    <div class="content"></div>
  </div>
</div>

如果我们移除溢出，它将按预期工作：

.container 
  display:flex;
  align-items:flex-start;
  border:2px solid green;

.content 
  flex:1;
  height:200vh;
  background:red;
  margin:10px;

.sticky 
  flex:1;
  height:100px;
  background:blue;
  margin:10px;
  position:sticky;
  top:0;


.wrapper 
  border:2px solid red;

<div class="wrapper">
  <div class="container">
    <div class="sticky"></div>
    <div class="content"></div>
  </div>
</div>

---

如果我们将overflow 保留在包装器中，但我们将滚动条移动到容器元素，它也会起作用，因为在滚动条和粘性元素之间没有设置溢出的元素：

.container 
  display:flex;
  align-items:flex-start;
  border:2px solid green;
  max-height:200px;
  overflow:auto;

.content 
  flex:1;
  height:200vh;
  background:red;
  margin:10px;

.sticky 
  flex:1;
  height:100px;
  background:blue;
  margin:10px;
  position:sticky;
  top:0;


.wrapper 
  overflow:hidden;
  border:2px solid red;

<div class="wrapper">
  <div class="container">
    <div class="sticky"></div>
    <div class="content"></div>
  </div>
</div>

相关：What are `scrolling boxes`?