Question

我有一个这样的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不粘在屏幕顶部，我不知道为什么。

Answer 1

元素只有在父元素位于视口中并且高于视口时才是固定的。

一点点更新了您的代码。

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

位置：粘性div在屏幕底部不粘性

1 个答案: