钉子の次元

Dimpurr – 千里之行,始於足下。

使用 position: sticky 达到粘性元素区域悬浮效果

在一些很长的表格中,常常会使用表头悬浮的设计以方便阅读,即在表格离开窗口之前,表头会一直 fixed 悬浮在表格的最顶上。还有许多诸如评论框等元素,也采用了这种被称为 Sticky Pin 或者 粘性元素 的设计。

这种效果一直以来需要通过 JavaScript 实现。不过就在去年,这项结合了 Relative (在屏幕中时) 和 Fixed (移出屏幕时) 的样式效果被提案添加到了 CSS3 中。下面是一个示例:

.sticky {
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: sticky;
	top: 15px; // 使用和 Fixed 同样的方式设定位置
}

因为这个样式尚未进入标准,还必须使用私有前缀。这里介绍一下浏览器兼容更好的 JS 实现方式:

一个不错的选择是使用 jQuery Pin 这个方便的 jQuery 脚本,支持简单的 Pin 元素、在容器范围内 Pin (例如 Table 内 Pin 住 Th)、在一定尺寸下禁用的功能。

如果要使用原生 JS 实现,可以参照下面的代码:

<style>
.sticky {
	position: fixed;
	top: 0;
}
.header {
	width: 100%;
	background: #F6D565;
	padding: 25px 0;
}
</style>

<div class="header"></div>

<script>
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;
function onScroll(e) {
	window.scrollY >= origOffsetY ? header.classList.add('sticky') :
					header.classList.remove('sticky');
}
document.addEventListener('scroll', onScroll);
</script>

预览→

  1. xloger说道:

    原创?看起来好学术

    1. xloger说道:

      浏览器跟操作系统图标你就不能弄静态图么?看着好蛋疼…

    2. dimpurr说道:

      第二段代码不是原创的…… 你知道我JS渣。其它也写的很简单的个说,只是看见现存资料太少就写了一下

      图标原本是静态的,这个动来动去的背景是 Lazyload 的加载图片,貌似插件被我改的有点问题加载完不会消失 …… 现在已经启用了安全宝的 CDN ,速度凑合,把插件关掉了

  2. 卜卜口说道:

    新特性赞

  3. cc说道:

    我想问一下这个代码的显示是怎么弄的吗?我装了SyntaxHighlighter 得不到我想要的效果。

    1. Dimpurr说道:

      这是主题自带的功能,点击编辑也写在 script.js 里了,没有做独立的插件

  4. cc说道:

    好的,谢谢解答

  5. 凯凯说道:

    非常感谢!代码很简洁!
    元宵节快乐!

    1. dwqd说道:

      dwqdwqdw

  6. Sonny说道:

    ie内核还是不行啊