css - 做一个{position:sticky; top:0} 元素的底部停留在视口内（没有 JS）

问题描述

我正在尝试制作一个仪表板框架（在 Bootstrap 5 中，但我认为它没有任何区别），其工作方式类似于这两张图片：

这基本上是我目前的情况：

<html>
  <body>
    <div class="pretoolbar">pretoolbar (non-essential information, to be hidden when scrolling)
    </div>
    <div class="sticky-toolbar"> sticky toolbar</div>
    <div class="container-fluid">
      <div class="sidebar col-3">
        [tall sidebar content]
      </div>
      <main class="col-9">
        [also tall content]
      </main>
    </div>
  <body>
</html>

CSS：

.pretoolbar{
    background-color: #555;
    color:white;
    height:32px;
}
.sticky-toolbar{
    background-color: black;
    color:white;
    height:56px;
    position:sticky;
    top:0;
}
.sidebar{
    background-color: white;
    position: sticky;
    top: 56px;
    overflow: hidden auto;
    max-height: calc(100vh - 56px);
    height: 100%;
}

我正在尝试几种方法，但似乎不起作用。我正在尝试的当然position: sticky是在主粘性工具栏和侧边栏上。但是由于不同的可用垂直空间（顶部滚动和中间滚动），在声明侧边栏的高度（calc(100vh - 56px), 56px 是工具栏的高度）后，它会导致侧边栏的底部及其滚动条脱落的视口底部。我正在考虑 flexbox, position:fixed, position:absolute... 无法找到通过它的方法。

我还发现了一个奇怪的行为（至少在 Chrome 中），当你将 aposition:sticky放在position:fixed

我的目标是避免使用 JavaScript，我基本上需要一个在工具栏和粘性搜索框的粘性状态之后改变其高度的侧边栏。（或者，换句话说，侧边栏的上边缘应该表现得像position:sticky，而下边缘应该表现得像position:fixed;bottom:0）。

你能想出一种不使用 JavaScript 来实现这一点的方法吗？

标签： cssflexboxcss-positionstickybootstrap-5

如果我理解您的情况，请告诉我。首先，我建议摆脱 *pre-toolbar 栏。否则，如果没有 js，想要的行为是不可能的。而且由于您提到的信息不是必需的，因此您可以将其放在任何地方。

但是，如果您仍然希望它位于顶部，则位置粘性固定工具栏和侧边栏。不要使用calc()最好使用高度 100vh 并将其放在工具栏后面，这样看起来会更短。然后，在工具栏的顶部（z-index）放置一个预工具栏，并使其在几秒钟后消失。

这是一个代码笔https://codepen.io/oscontrerasn/pen/WNpxJwV

css - 做一个{position:sticky; top:0} 元素的底部停留在视口内（没有 JS）

问题描述

解决方案

推荐阅读