文章标签

创建页面内容，使其在滚动时粘附在视口上，例如跳转到锚点菜单或章节标题，从未如此简单。在 CSS 规则集中添加 position: sticky，设置方向偏移量（例如 top: 0），然后…

完全同意 David 的观点，CSS 需要一个选择器来知道 position: sticky; 元素是否正在执行其粘性操作。

理想情况下，我们可以使用 :stuck CSS 指令，但实际上我们能做到的最好的方法是

前几天，我在 Corey Ginnivan 的网站 上看到了这个特别可爱的片段，当您滚动时，卡片集合会彼此堆叠在一起。…

您知道那些不小心将元素放置在浏览器窗口右侧边缘时出现水平滚动条的情况吗？它可能是一个滑入的菜单或类似的东西。有时我们会对…使用 overflow-x: hidden;

滚动是我们所有人都知道并在网络上进行的操作，以至于它成为一种期望，或者甚至是一种习惯，就像刷牙一样。这可能是我们没有过多考虑滚动设计的原因…

Mike Solomon 参与了 Esquire 的一篇花哨的滚动式文章 并 写了一篇博客文章。它包含了每个步骤的 GIF 动画，不仅展示了如何使用 position: sticky;，还展示了如何使用负边距、包装 div、背景和…

您不能对 <thead></thead> 使用 position: sticky;。也不能对 <tr></tr> 使用。但是您可以对 <th></th> 使用粘性定位，这意味着您可以在普通的 <table></table> 中创建粘性标题。这是一件棘手的事情，因为如果您不知道…

除了 visible 和没有高度之外，任何 overflow 值都是具有 position: sticky; 的子元素的敌人。就像该元素准备在父元素滚动时粘附，但由于高度不受限制，它永远不会粘附。…

我相当喜欢 position: sticky;。它有实际的用例。我想到的是在长文章的侧边栏中保留目录，但作为一种相当简单的实现，并且没有重叠事物的风险…