带有 "sticky" 卡片的水平滚动卡片

Question

我有一个页面使用Bootstrap 5.第一张卡片作为header记录，其他卡片可以水平滚动。这一切都很好。

我的用户要求在水平滚动其他卡片时将第一张卡片锁定到位（始终显示）。这有效，但仅适用于视口上显示的初始卡片集。滚动过这些卡片后，第一张卡片也会滚出页面。

我需要一些帮助来进行设置，以便第一张卡片始终显示在页面上并且不会滚动。其他卡片应该滚动到第一张卡片后面

我这里有一个代码示例：https://www.codeply.com/p/3nwL7bVEMl

Answer 1

1. 你可以给你的贴卡一个高度

2. 在使用 z-index 之前，您需要使用 display:relative;，而不是将 z-index 添加到您的便利贴

3. 使用position:fixed;让您的名片始终停留在屏幕上。

.sticky-card {
    min-width: 400px;
    height:220px;
    display:relative;
    z-index: 1;
    position: fixed;
    left: 0;

}

Answer 2

将 overflow 添加到 wrapper/container class (<div class="d-flex flex-row flex-nowrap bg-warning">)。

.d-flex.flex-row.flex-nowrap.bg-warning {
    overflow: auto;
}

您可以找到其他选项 here。