文章标签

“拉开窗帘”是我对滚动时背景从暗到亮，而顶部内容在粘性位置也从亮到暗的效果的称呼。…

假设你有一个两列的 CSS 网格，并且你想要其中一列表现得像 position: sticky;。没有什么能阻止你这样做。但是这两列的默认高度将是…

现在听到“粘性页脚”这个词，大多数人都会想到一个 position: sticky 的情况，其中页脚元素在某些父元素的滚动上下文中固定在屏幕上。

这与我正在谈论的…

Page Laubheimer 说，如果你要使用粘性页眉…

1. 保持简洁。
2. 用视觉效果将其与页面其余部分区分开来。
3. 如果它要移动，请保持最简化。（我认为，尊重 prefers-reduced-motion。）
4. 考虑“部分持久

粘性或固定导航是一种流行的设计选择，因为它为用户提供了持久访问网站导航的方式。另一方面，它会占用页面空间，有时会覆盖内容，从而导致体验不佳…

你将 position: sticky; 应用于元素以及 top、left、right 或 bottom 阈值，当超过阈值时，它将在该位置“粘住”，只要有空间…

想象一个网站的页眉，它很厚，在内容的顶部和底部有足够的填充。当你向下滚动时，它会收缩起来，减少一些填充，让更多屏幕实…

我们已经介绍过，单个 <table> 单元格、<th> 和 <td> 可以是 position: sticky。将表格的页眉固定在屏幕顶部，并在滚动大量行时保持固定（就像 这个 …

前几天我有一个独特的要求：构建一个包含全屏元素的布局，同时一个元素保持粘性，固定在顶部。这最终变得非常棘手，所以我在这里记录它，以防有人…