Why is 'position: sticky' not working with Core UI's Bootstrap CSS

江枫思渺然 提交于 2019-11-27 15:53:57

The issue is the use of overflow inside .app-body. It's a bit tricky but there should be no overflow property set to any element between the element that has the scroll and the sticky element.

Here is a basic example to illustrate. The scroll is on the viewport and we have a wrapper with overflow:hidden (or even auto) thus the sticky behavior won't work.

.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>

If we remove the overflow, it will work as expected:

.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>

If we keep the overflow within the wrapper but we move the scroll to the container element it will also work because there is no element with overflow set between the scroll and the sticky element:

.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>

Related: What are `scrolling boxes`?

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!