在网页中，粘性元素是页面的一个元素，它保持在屏幕上的固定位置，使其始终可见。
我正在 Shopify 商店工作，但我想让这个侧边栏具有粘性和可滚动性。可滚动的原因是使用position:sticky;时侧边栏的 css 标注看起来...
我遇到了冲突，因为只有当我使用表响应类的 div 时，我的标头才被修复，但我需要它来使表溢出。 有人能帮我吗？ 与表格响应...
我正在尝试创建跟随页面当前部分滚动的内容的浮动预览。用代码来解释可能更容易。 我们有当前的内容。 我正在尝试创建跟随页面当前部分滚动的内容的浮动预览。用代码解释可能更容易。 我们有当前内容。 <div class="current-content"> <p>hi 1</p> <p>hi 2</p> <p>hi 3</p> <p>hi 4</p> <p>hi 5</p> <p>hi 6</p> <p>hi 7</p> <p>hi 8</p> <p>hi 9</p> </div> 之后我们还有更多内容。 <div class="next-content"> <p>hi 1</p> <p>hi 2</p> <p>hi 3</p> <p>hi 4</p> <p>hi 5</p> <p>hi 6</p> <p>hi 7</p> <p>hi 8</p> <p>hi 9</p> </div> 这个想法是，当我们从顶部滚动页面时，我们滚动当前内容，但下一个内容使用粘性位置占据视口的 50%，直到它滚动到视图中。 p { font-size: 28px; marin: 20px; } .current-content { background: yellow; } .next-content { background: pink; position: sticky; bottom: -50vh; } 问题是，使用 top 似乎不可能实现这一点，因为下一个内容出现在 HTML 树中的当前内容之后。因此只能使用底部来完成。问题是，底部是对下一个内容相对于视口的底部位置的引用，因此如果不知道下一个内容的高度，就无法使其在卡住时仅填充视口的 50%。 我希望这是有道理的，有没有办法实现这一点。 对于上下文，想象一个新闻网站，您可以直接从一篇文章滚动到下一篇文章，但在滚动时，始终会预览下一篇文章的内容，一旦您到达那里，就会滚动到视图中。 p { font-size: 28px; marin: 20px; } .current-content { background: yellow; } .next-content { background: pink; position: sticky; bottom: -100%; // set to -100% for demonstration purposes } <body> <div class="current-content"> <p>hi 1</p> <p>hi 2</p> <p>hi 3</p> <p>hi 4</p> <p>hi 5</p> <p>hi 6</p> <p>hi 7</p> <p>hi 8</p> <p>hi 9</p> </div> <div class="next-content"> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> </div> </body> 这个过于复杂的解决方案的直觉是使用 make current-content 本身 50vh 并允许 overflow:scroll 。这样下一个div就会自然地放在中间了 p { font-size: 28px; margin: 20px; } .current-content { background: yellow; position: relative; height: 50vh; overflow: auto; } .next-content { background: pink; } <div class="current-content"> <p>start1</p> <p>hi 2</p> <p>hi 3</p> <p>hi 4</p> <p>hi 5</p> <p>hi 6</p> <p>hi 7</p> <p>hi 1</p> <p>hi 2</p> <p>hi 3</p> <p>hi 4</p> <p>hi 5</p> <p>hi 6</p> <p>hi 7</p> <p>hi 1</p> <p>hi 2</p> <p>hi 3</p> <p>hi 4</p> <p>hi 5</p> <p>hi 6</p> <p>hi 7</p> <p>hi 1</p> <p>hi 2</p> <p>hi 3</p> <p>hi 4</p> <p>hi 5</p> <p>hi 6</p> <p>hi 7</p> <p>hi 1</p> <p>hi 2</p> <p>hi 3</p> <p>hi 4</p> <p>hi 5</p> <p>hi 6</p> <p>hi 7</p> <p>hi 1</p> <p>hi 2</p> <p>hi 3</p> <p>hi 4</p> <p>hi 5</p> <p>hi 6</p> <p>hi 7</p> <p>hi 1</p> <p>hi 2</p> <p>hi 3</p> <p>hi 4</p> <p>hi 5</p> <p>hi 6</p> <p>hi 7</p> <p>hi 8</p> <p style="margin-bottom: 0px;">end1</p> </div> <div class="next-content"> <p style="margin-top: 0px;">start2</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>end2</p> </div> 但是，正如您所看到的，这不是所希望的，因为它将为 current-content 和父容器创建两个滚动条。 这个想法是使用 animation-timeline:scroll(y) 来检测是否到达 next-content div 并且应该开始滚动。在 current-content 中创建了覆盖父容器的伪元素，无论用户滚动到哪里，current-content 容器都会滚动。当它到达末尾时，父容器的滚动条就可以移动，这使得 next-content 位于伪元素上方，这样 next-content 就可以向下滚动。 但是，该解决方案有一个主要限制：由于该解决方案会导致屏幕上半部分出现额外的滚动条，因此通常会选择隐藏它。 p { font-size: 28px; margin: 20px; } /*Not required but since there are childs using z-index, I would wrap it under a new stacking context*/ .wrapper { isolation: isolate; } .current-content { background: yellow; padding-bottom: 50vh; position: relative; height: 50vh; width: 100%; overflow: auto; scrollbar-width: none; } .content-wrapper { position: relative; } .content-wrapper::after { content: ""; position: absolute; height: 100%; width: 100%; z-index: 2; display: block; top: 50vh; } .next-content { background: pink; position: relative; top: -50vh; box-sizing: content-box; background-clip: content-box; animation: offset-next 1ms linear both; animation-timeline: scroll(y); } @keyframes offset-next { from { z-index: 1; } 0.01% { padding-top: 50vh; top: -100vh; z-index: 3; } to { padding-top: 50vh; top: -100vh; z-index: 3; } } <div class=wrapper> <div class="current-content"> <div class="content-wrapper"> <p>start1</p> <p>hi 2</p> <p>hi 3</p> <p>hi 4</p> <p>hi 5</p> <p>hi 6</p> <p>hi 7</p> <p>hi 1</p> <p>hi 2</p> <p>hi 3</p> <p>hi 4</p> <p>hi 5</p> <p>hi 6</p> <p>hi 7</p> <p>hi 1</p> <p>hi 2</p> <p>hi 3</p> <p>hi 4</p> <p>hi 5</p> <p>hi 6</p> <p>hi 7</p> <p>hi 1</p> <p>hi 2</p> <p>hi 3</p> <p>hi 4</p> <p>hi 5</p> <p>hi 6</p> <p>hi 7</p> <p>hi 1</p> <p>hi 2</p> <p>hi 3</p> <p>hi 4</p> <p>hi 5</p> <p>hi 6</p> <p>hi 7</p> <p>hi 1</p> <p>hi 2</p> <p>hi 3</p> <p>hi 4</p> <p>hi 5</p> <p>hi 6</p> <p>hi 7</p> <p>hi 1</p> <p>hi 2</p> <p>hi 3</p> <p>hi 4</p> <p>hi 5</p> <p>hi 6</p> <p>hi 7</p> <p>hi 8</p> <p style="margin-bottom: 0px">end1</p> </div> </div> <div class="next-content"> <p style="margin-top: 0px">start2</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>hi</p> <p>end2</p> </div> </div>
我使用绝对定位让 div 填满整个浏览器窗口。但是，我不想将其与有时存在有时不存在的粘性 div 结合起来。 让事情变得有点
为什么将填充添加到最近的滚动端口会改变粘性元素所粘的阈值位置？
根据我的理解，对于粘性定位方案，CSS 规范定义应用于粘性元素的插入是相对于最近的滚动端口的边缘，然后形成 Sti...
如何创建纯 CSS 嵌套粘性滚动结构，类似于新的 VS Code 和 IntelliJ 粘性范围滚动？
我对滚动时堆叠某些结构化文本范围的纯CSS方式感兴趣，可能使用CSS位置：粘性。 作为参考，这是 VS Code 中的功能：https://learn.mic...
header元素的内容在滚动时有“跳跃效果”。这只发生在 iOS 移动设备上。 标头具有粘性位置。如果我将其更改为固定位置，它就会固定...
我在图像下方创建了一个导航栏，以显示各种社交媒体平台的图标。然而，我试图将这些图标放置在网站的最底部并使其响应
首先对列中具有特定“粘性”值的二维数组的行进行排序，然后按另一列升序排序
我想按“点击”对数组进行排序，但我也想查找特定的 ID 并将其设置为第一次迭代，然后继续“点击”排序。 例如，我有一个多维数组： $米娅...
我有这张桌子 .table_wrapper { 宽度：100%； 高度：400像素； 溢出：自动； 位置：相对； } .table_wrapper 头 th { 位置：-webkit-sticky； 位置：坚持...
我已经为页面创建了粘性滚动间谍导航，但是当用户聚焦链接或复选框时，会出现奇怪的行为。仅当容器具有位置粘性时才会发生此错误，在位置固定此...
https://jsfiddle.net/30suam6z/1/ 。第一的 { 高度：100vh； 背景颜色：红色； 位置：相对； z 索引：2； /* 增加 z-index 以确保它覆盖.test */ } 。第二 { 高度：1...
我尝试通过位置粘性将元素居中。但我想将它相对于其容器元素定位。容器的高度和粘性元素的高度都是可变的。所以我...
我正在尝试基于Python应用程序生成的cookie在Nginx中实现有限时间内的粘性会话。在 nginx.conf 文件中，我知道我可以使用 ip_hash 来确保我保持在...
我目前正在开发一个网络项目，我在页面上放置了一个粘性元素。但是，我遇到了一个问题，粘性元素似乎会影响下一个元素的高度
我真的很努力研究如何使网格的每个元素粘在水平滚动上。我尝试了很多组合，但 {date} 从来没有粘性。我尝试添加溢出-x-
为什么这个类似 html 表格的结构在离开视口时不会垂直滚动，并带有粘性标题和粘性第一列？
在我将真实数据放入其中并将其重构为React组件之前，我试图弄清楚如何为类似表格的结构构建这个基本模板（我知道它不是一个实际的表格）。我有...
当找到特定值时，按列值对多维数组的行进行排序，并使用粘性第一行
我的多维数组按 OwnerNickName 字段按字母顺序排序，但我需要将 OwnerNickName = 'My House' 行作为粘性第一行，然后按