我有一个这样的 div :
HTML
<div class="row" style="min-height: calc(100vh - 81px);">
<aside class="col-lg-3" style="padding-top: 8px; background: rgb(227, 227, 227); padding-left: 20px;">
<h3>Title</h3>
<div id="treeparent"></div>
</aside>
<div class="col-lg-7 pt-2"></div>
<div class="col-lg-2" style="border-width: 0px 0px 0px 0.25rem; border-style: solid; border-color: rgb(234, 35, 40); border-image: linear-gradient(rgb(179, 108, 219), rgb(235, 73, 113)) 0 0 0 100% / 1 / 0 stretch;">
<div id="tocOut">
<div>
<h1 id="this-is-a-title" class="header-toc">
<a href="#this-is-a-title" title="This is a title">
<span>This is a title</span>
</a>
</h1>
</div>
</div>
</div>
</div>
CSS
#tocOut {
position: sticky;
padding-top: 8px;
top: 81px;
overflow: auto;
height: 100%;
}
问题是 #tocOut
div 没有粘在屏幕顶部,我不知道为什么。
最佳答案
当然,只有当父元素在视口(viewport)中并且高于视口(viewport)时,元素才会固定。
稍微更新了您的代码。
#tocOut {
position: -webkit-sticky; /* */
position: sticky;
padding-top: 8px;
top: 21px;
overflow: auto;
background: orange;
}
<div class="row" style="min-height: calc(100vh - 81px);">
<aside class="col-lg-3" style="padding-top: 8px; background: rgb(227, 227, 227); padding-left: 20px;">
<h3>Title</h3>
<div id="treeparent"></div>
</aside>
<div class="col-lg-7 pt-2"></div>
<div class="col-lg-2" style="border-width: 0px 0px 0px 0.25rem; border-style: solid; border-color: rgb(234, 35, 40); border-image: linear-gradient(rgb(179, 108, 219), rgb(235, 73, 113)) 0 0 0 100% / 1 / 0 stretch;">
<div id="tocOut">
<div>
<h1 id="this-is-a-title" class="header-toc">
<a href="#this-is-a-title" title="This is a title">
<span>This is a title</span>
</a>
</h1>
</div>
</div>
<br>ANOTHER CONTENT<br> <br>ANOTHER CONTENT<br> <br>ANOTHER CONTENT<br> <br>ANOTHER CONTENT<br> <br>ANOTHER CONTENT<br> <br>ANOTHER CONTENT<br> <br>ANOTHER CONTENT<br> <br>ANOTHER CONTENT<br> <br>ANOTHER CONTENT<br> <br>ANOTHER CONTENT<br> <br>ANOTHER CONTENT<br> <br>ANOTHER CONTENT<br>
</div>
</div>
关于html - 位置 :sticky div not sticky at the bottom of the screen,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55994589/