如果元素大于屏幕高度，不要使用粘性

Question

我有一个侧边栏，它位于 sticky 但在某些情况下大于屏幕的高度。

如果侧边栏实际上比屏幕高度大，我不希望它粘在顶部。它应该随着页面内容向下滚动。

我正在使用 Bootstraps sticky-top class。

它具有以下属性：

.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
}

我将 top: 0 更改为 top: 50px，因为我需要上面的 space。

下面是一些示例代码：https://codepen.io/cray_code/pen/ZEaOXwo

<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div class="toc sticky-top">
                <nav class="list-group">
                        Links (see example)
                </nav>
            </div>
        </div>
            <div class="col-lg-9">
                Content (see example)
            </div>
        </div>
</div>

我尝试了 here 的解决方案并将以下代码添加到我的 class:

.toc {
    overflow-y: auto;
    max-height: 100vh;
}

但这无济于事。

是否有纯粹的 CSS 解决方案，或者我是否需要使用 JavaScript？

Answer 1

不确定这是否是您想要的，但也许在您的 css 中使用 calc() 可以帮助您。

.toc{
  overflow-y: auto;
  max-height: calc(100vh - 50px);
}

Answer 2

希望这 pen 对您有所帮助

一些解释：

在 js 中我们使用 .offsetHeight&.clientHeight 来获取高度我们检查天气这个高度 (493px) + 50px 偏移量是否大于屏幕高度。
当屏幕尺寸较小时我们将位置设置为static
我们还设置 margin-top: 50px 而不是 top: 50px
因为 top 仅适用于 sticky 而 margin-top 适用于 static

Answer 3

对于高于 window 高度的旁边块，您可以使用 smartSticky 脚本只需将“data-smartsticky”属性添加到您的旁边块 https://www.npmjs.com/package/smartsticker 粘性块的父块高度必须为 100%，或者对于 flex - flex-grow:1

如果元素大于屏幕高度，不要使用粘性

Don't use sticky if element is larger than screen height

html

css

sticky

twitter-bootstrap

bootstrap-4

希望这 pen 对您有所帮助

一些解释：