sticky 相关问题

在网页中，粘性元素是页面的一个元素，它保持在屏幕上的固定位置，使其始终可见。

... <div className="bg-yellow-200 z-10 "> <div className="flex flex-row h-[1000px] "> <div className="flex flex-col gap-4 w-1/2"> <div className="h-40 w-96 bg-green-200"></div> <div className="h-40 w-96 bg-green-200"></div> <div className="h-40 w-96 bg-green-200"></div> </div> <div className="w-1/2 bg-blue-400 z-50"> <div className="sticky top-0 left-0 right-0 w-40 h-40 bg-red-500 z-50"> <p>sticky</p> </div> </div> </div> </div> 我试图让红色盒子粘在黄色盒子的区域。但可能是我写错了所以它不起作用。请帮我。谢谢:) 我希望当我向下滚动时红色框粘在顶部，当我滚动经过黄色框区域时红色框将停止粘住我想要实现的细节提供的代码可以完成您想要的操作。当您向下滚动时，红色框确实会卡在顶部，而当您滚动经过黄色容器框时，红色框就会松开。我认为您无法注意到这一点，因为您没有足够的滚动区域。所以我在内容周围添加了一个新的div，并给了它更大的高度。 <div className="min-h-[2000px]"> <div className="bg-yellow-200 z-10 "> <div className="flex flex-row h-[1000px] "> <div className="flex flex-col gap-4 w-1/2"> <div className="h-40 w-96 bg-green-200"></div> <div className="h-40 w-96 bg-green-200"></div> <div className="h-40 w-96 bg-green-200"></div> </div> <div className="w-1/2 bg-blue-400 z-50"> <div className="sticky top-0 left-0 right-0 w-40 h-40 bg-red-500 z-50"> <p>sticky</p> </div> </div> </div> </div> </div>

css tailwind-css sticky htm

回答 1 投票 0

粘性CSS在opencart前端不起作用

我正在尝试将带有粘性元素的简单代码嵌入到主页或任何页面中。 .card-container { 内边距：20px；位置：相对； } .scroll-card { 宽度：100%；身高：...

css opencart sticky

回答 1 投票 0

位置：粘性不适用于合并单元格

我想当表格水平滚动时将表格的第一列和第二列固定在左侧。我使用position:sticky来固定柱子，它在普通柱子上工作得很好。不过，我还有我...

css html-table cell sticky fixed-header-tables

回答 1 投票 0

无法将列粘在表格中

我有一个由于其长度而启用了overflow-x 的表。水平滚动时，每行开头的数据会被隐藏，因此我想至少使一个起始列粘住。我试过了

php html jquery css sticky

回答 1 投票 0

粘性标题不适用于 z-index，阴影不断被其他内容隐藏

我有这个问题，在我的标题上，框阴影不可见，因为我的导航内容位于它上面，尽管我的标题有更高的 z-index。我看不出到底是什么...

html css header sticky absolute

回答 1 投票 0

react-bootstrap-table-next 中的粘性列标题

在这里需要一些帮助，我是 React js 新手，因此需要快速推送来解决我的查询。我在 UI 上以表格的形式显示 API 响应，这里我使用react-bootstrap-table-next

reactjs sticky react-bootstrap-table columnheader

回答 2 投票 0

实现粘性标题功能

我正在尝试实现粘性标题功能，我认为我变得太复杂了。这就是我现在所处的位置：类 StickyTitles { 构造函数（标题选择器，容器选择器，

javascript sticky

回答 1 投票 0

Chrome getBoundingClientRect 在粘性表格单元格中使用时会产生不一致的结果

我正在尝试在 SCSS/JavaScript 中重新创建一个具有以下要求的设计系统：数据显示在表格中该表可水平滚动，始终包含在

javascript css sticky getboundingclientrect

回答 1 投票 0

粘住容器直到子项滚动到最后

我有一个立场：置顶；顶部：卡片上的 80px 样式，卡片上方有一个标题，解释了这些卡片的用途，我希望标题显示直到所有粘性卡片都显示为止

javascript html css sticky

回答 1 投票 0

position:absolute元素可以粘性吗？

在CSS中，position:sticky使元素能够以position:static行为显示（即它在文档流中采用其默认位置），直到它到达某个滚动位置，af...

css css-position sticky

回答 5 投票 0

使用网格布局的CSS粘卡

我想要使用网格布局的粘性卡布局。这就是我设法实现的目标： 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

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

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