sticky 相关问题

我想要使用网格布局的粘性卡布局。这就是我设法实现的目标： 1 我想使用网格布局来设计粘性卡的布局。这就是我设法实现的目标： <div class="cards"> <div class="card">1</div> <div class="card">2</div> <div class="card">3</div> <div class="card">4</div> <div class="card">5</div> </div> :root { --card-top-offset: 3rem; --card-h: 36rem; } .cards { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: calc(var(--card-h) / 2); align-items: baseline; } .card { position: sticky; top: 0; height: var(--card-h); transition: all 0.5s; } for (const cards of document.querySelectorAll(".cards")) { let i = 0; for (const card of cards.children) { if (card.classList.contains("card")) { card.style.top = `calc(5vh + ${i} * var(--card-top-offset))`; i += 1; } } cards.style.setProperty( "grid-template-rows", `repeat(${i}, var(--card-h))`, ); } 前 4 张卡效果很好，但第五张卡比我预期的要早脱开。我认为这是因为父元素 cards 正在结束。有没有办法使用 css 网格来实现这种行为？我发现了一些其他方法，但它涉及对某些元素的某些高度进行硬编码，我想避免这种情况。您遇到的问题是由于粘性定位依赖于父容器的高度。当父容器结束时，粘性元素无法再粘在顶部。为了实现您正在寻找的行为，您可以利用 CSS 网格进行一些调整。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sticky Cards</title> <style> :root { --card-top-offset: 3rem; --card-h: 36rem; } body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .cards { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: calc(var(--card-h) / 2); align-items: baseline; position: relative; padding-top: 5vh; } .card { position: sticky; top: calc(5vh + var(--card-top-offset) * var(--i)); height: var(--card-h); transition: all 0.5s; background: lightblue; } .card:nth-child(1) { --i: 0; } .card:nth-child(2) { --i: 1; } .card:nth-child(3) { --i: 2; } .card:nth-child(4) { --i: 3; } .card:nth-child(5) { --i: 4; } </style> </head> <body> <div class="cards"> <div class="card">1</div> <div class="card">2</div> <div class="card">3</div> <div class="card">4</div> <div class="card">5</div> </div> </body> </html> 这里，每张卡片都有一个 --i 自定义属性，用于确定其相对于顶部的位置。这避免了硬编码高度并允许更动态的设置。位置：粘性仍被使用，但具有计算的顶部偏移量。

html css css-grid sticky

回答 1 投票 0

是否可以混合使用绝对定位和粘性定位？

在此示例中，内部灰色 div 的行为应该像粘性 div - 因此当您向下滚动页面时它会粘在屏幕顶部 - 但这并没有发生！我有什么错吗？ <...

css position sticky absolute

回答 1 投票 0

粘性位置：标题在一段时间后滚动离开

在我的网站上，我已将粘在顶部，但当我向下滚动时它只粘了几秒/像素，然后它就滚走了，请参阅下面的代码片段并滚动... 在我的网站上，我已将 <nav> 粘在顶部，但当我向下滚动时它只粘了几秒/像素，然后它就滚走了，请参阅下面的代码片段并向下滚动。我希望向下滚动时 nav 始终粘在顶部，除非 <header> 可见。 HTML <!DOCTYPE html> <html> <head> <title>Danis Website</title> <link href="reset.css" type="text/css" rel="stylesheet"> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <div id="wrapper"> <header> <h1>Danis Website</h1> </header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="rezepte.html">Rezepte</a></li> <li><a href="zutaten.html">Zutaten</a></li> </ul> </nav> <main> Main Main Main<!-- In the code snippet below here are more lines of Text, here if have omitted the lines for better readability. </main> <footer> Footer </footer> </div> </body> </html> CSS *{ margin: 0; padding: 0; } body, html{ height: 100%; width: 90%; margin: 0 auto; background-color: #aaa; } #wrapper{ display: flex; flex-direction: column; height: 100%; background-color: fuchsia; } header{ flex: 0 0 50px; background-color: #888; text-align: center; position: sticky; top: 100px; } nav{ flex: 0 0 50px; background-color: dodgerblue; } nav ul { display: flex; list-style-type: none; background-color: dodgerblue; height: 100%; } nav ul li { flex: 1; text-align: center; padding: 10px; border-left: 2px solid #aaa; } nav ul li:first-child { border-left: 0; } nav ul li a{ color: white; text-decoration: none; } nav ul li:hover { background-color: #888; } main{ flex: 1; background-color: #ddd; } footer{ flex: 0 0 50px; background-color: #888; } #list{ display: flex; flex-wrap: wrap; } #list-item{ flex: 0 1 300px; display: flex; border: 1px solid dodgerblue; margin: 10px; padding: 10px; } #list-item-img{ flex: 0 0 auto; margin-right: 5px; } #list-item-text{ flex: 1; margin-left: 5px; } #list-item-text p { margin: 5px; } *{ margin: 0; padding: 0; } body, html{ height: 100%; width: 90%; margin: 0 auto; background-color: #aaa; } #wrapper{ display: flex; flex-direction: column; height: 100%; background-color: fuchsia; } header{ flex: 0 0 50px; background-color: #888; text-align: center; } nav{ flex: 0 0 50px; background-color: dodgerblue; position: sticky; top: 0px; } nav ul { display: flex; list-style-type: none; background-color: dodgerblue; height: 100%; } nav ul li { flex: 1; text-align: center; padding: 10px; border-left: 2px solid #aaa; } nav ul li:first-child { border-left: 0; } nav ul li a{ color: white; text-decoration: none; } nav ul li:hover { background-color: #888; } main{ flex: 1; background-color: #ddd; } footer{ flex: 0 0 50px; background-color: #888; } #list{ display: flex; flex-wrap: wrap; } #list-item{ flex: 0 1 300px; display: flex; border: 1px solid dodgerblue; margin: 10px; padding: 10px; } #list-item-img{ flex: 0 0 auto; margin-right: 5px; } #list-item-text{ flex: 1; margin-left: 5px; } #list-item-text p { margin: 5px; } <div id="wrapper"> <header> <h1>Danis Website</h1> </header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="rezepte.html">Rezepte</a></li> <li><a href="zutaten.html">Zutaten</a></li> </ul> </nav> <main> Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main </main> <footer> Footer </footer> </div> 编辑：我在 Arch Linux 上使用 Firefx 37.0.2 我相信这可能是因为你的height: 100%上有body。当您的内容太长时，body不会环绕整个内容，而只是继承浏览器视口高度。因此，当您滚动经过 body 的底部时，nav 就会停止粘住。顺便说一句，虽然我认为你还不应该使用position: sticky。它的支持率不到浏览器的 20%。 http://caniuse.com/#feat=css-sticky 解决方案：将 #wrapper 中的 height: 100%; 替换为 min-height: 100%;。刚刚删除 height: 100%; 时，页面小于内容未填充视口的页面上的视口我这里也有同样的棘手问题。正如DigitalDouble所说，是内容高度问题，但不仅仅是身体造成的我在我的 JavaScript 代码中找到了它...... 改变 $(contentElement).style.高度 = "99px"; 到 $(contentElement).style.minHeight = "99px"; 我希望它有帮助。 =) 只需显示我在哪里遇到此问题（运行代码片段以查看为什么会发生） html, body { /*it takes 100vh always */ height: 100%; border: 1px solid red; } .section { /*there was a problem, because it also set to 100vh */ height: 100%; /*remove it or change to fit-context*/ } .header { top: 0; position: sticky; background: green; } .main > div { height: 200vh; } <html> <body> <section class="section"> <header class="header">Header</header> <main class="main"> <div>Hello</div> </main> </section> </body> </html>

html css scroll position sticky

回答 3 投票 0

Javascript classlist.add 代码仅部分工作

当我向下滚动页面时，我一直在努力让导航栏菜单“粘住”。我正在使用 JS 插入 html“导航代码”，并且我已将 JS“棒”代码包含在

javascript navbar sticky

回答 1 投票 0

Jetpack compose 中 Double StickyHeader 的实现

我是 Jetpack Compose 的新手，想要堆叠双标头（如粘性标头，但是双标头）。这是一个我想要实现的与此完全相同的存储库：https://github.com/Kenber/

android android-jetpack-compose sticky

回答 1 投票 0

位置粘性在屏幕调整大小时不会保持居中对齐

我注意到，在屏幕宽度减少一定程度后，居中对齐（垂直）位置粘性的元素开始崩溃，具体取决于该元素的宽度。不同位置：...

html css sticky

回答 2 投票 0

CSS 粘性定位在 <thead> 中不起作用的可能原因

我创建了一个模仿 C# 的 datagridview 的自定义元素。我能够像 dot net 的 listview 或 datagridview header 一样将粘在顶部，直到最近我注意到它确实如此......

css html-table position sticky

回答 1 投票 0

使购物车图例在移动设备上具有粘性

我正在尝试实现粘性效果，就像 AboutYou 在移动视口上为他们的购物车/购物篮所做的那样，这意味着价格摘要是粘性的，一旦达到价格图例，它将停止滚动...

html css sticky sticky-footer

回答 1 投票 0

转到表格组件的下一页时删除了粘性列

我有一个自定义表格和分页器独立组件。当我有一个表格本身时，粘性对于该列来说效果很好，但是当我向表格添加分页器时，只要我...

angular html-table pagination sticky angular-changedetection

回答 1 投票 0

CSS 如果父级有overflow-x: auto，如何为元素设置粘性？

我找不到解决我的问题的方法。我有一个表格，我需要添加水平滚动（overflow-x：auto）和表格的粘性标题。我尝试添加一个不同位置的包装纸...

css overflow sticky

回答 1 投票 0

Tailwind：滚动时粘性

我正在尝试创建一个布局，其中有一个图像在滚动时粘在视口的左侧，直到内容结束，此时它应该滚动到下一部分。怎么...

css tailwind-css sticky tailwind-ui

回答 1 投票 0

如何修复表格中粘性列后面出现的下拉菜单

表格中，第一列表示位置“粘性”，打开下拉菜单位置：绝对。但后续列与打开的菜单重叠。 /* 下拉按钮 */ .d...

html css sticky absolute

回答 2 投票 0

带有粘性标题的角度材质表，使用overflow-x时出现问题

我有下表 ... 我有下表 <div class="table-container" #scrollable> <table mat-table [dataSource]="dataSource" cdkScrollable>  <ng-container *ngFor="let column of displayedColumns"> <ng-container [matColumnDef]="column"> <th mat-header-cell *matHeaderCellDef>{{ column }}</th> <td mat-cell *matCellDef="let element">{{ element[column] }}</td> </ng-container> </ng-container>  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> </div> CSS .table-container { width: 100%; /* overflow-x: auto; */ } .fixed-header { position: sticky; top: 0; background-color: white; z-index: 1; } 注意 .table-container 中如何注释 CSS 溢出。到目前为止，桌子上的粘性标题就可以工作了。 ..除非您取消注释表容器内的“overflow-x”片段。 .table-container { width: 100%; overflow-x: auto; } .fixed-header { position: sticky; top: 0; background-color: white; z-index: 1; } 我有一个类似的场景，必须在表格容器内添加水平滚动（仅适用于较小的屏幕），但是通过这样做，在进行垂直滚动时，表格的粘性标题不会保持在表格顶部。有什么办法可以达到这个目的吗？请参阅此 stackblitz 以查看完整示例。已经尝试过 chatGPT 来寻找解决方案，但这很令人困惑，哈哈当 overflow 元素的父元素上有 sticky 属性时，粘性功能将不起作用，您需要将 overflow-x: auto 添加到 body 中 body { font-family: Roboto, Arial, sans-serif; margin: 0; overflow-x: auto; width: 100vw; } CSS： .table-container { overflow-x: auto; display: unset; } .fixed-header { position: sticky; top: 0; background-color: white; /* Ajusta el color de fondo según tu diseño */ z-index: 1; } Stackblitz 演示

angular angular-material sticky angular-material-table

回答 1 投票 0

带有粘性元素的动画滚动

我的布局包括全宽图像和下面两列文本。一开始我想隐藏文本列，所以它就像一个图像覆盖了视图中的整个文本......

javascript html css animation sticky

回答 1 投票 0

sticky 相关问题

最新问题