粘性定位

@Sticky

说明: . 兼有固定定位和相对定位的特性

. 不会脱离文档流；但是层级提升 - 比普通元素高

. 有参考：通常是父元素；如果没有特别指定容器，则相对于离自己最近的带有滚动条的祖先元素 - nearest scrolling ancestor；如果都没有，则以 <body> 为参考

. 有滚动：容器的内容，包括粘性元素，总高度要大于容器，这样才能滚动起来，容器才会出现滚动条；通常粘性元素通常是滚动容器的直接孩子

. 有距离：必须指定粘性元素到容器的位置：left、top、right、bottom之一；多使用 top

. 其父元素不能设置 overflow:hidden

. 适合 banner/swiper + 主导航 + 内容的网页。网页滚动时候，banner 移出，导航保留/黏贴在顶端/吸顶，内容也逐步移出

. 注意 z-index 的影响，应确保粘性元素位于上层

. 更多信息，请访问 MDN - position

Sticky elements are "sticky" relative to the nearest ancestor with a "scrolling mechanism", which is determined by its ancestors' position property.

案例 cases

[] 粘性定位；参见本页顶部导航和示例标题

. 页面没有滚动时，导航/标题停留在原来位置

. 当页面向下滚动时，导航/标题驻留/黏住在顶部一定位置

. 当页面向上滚动时，导航/标题返回其原来位置

. 示例中，使用 CSS 变量指定导航的高度为10vh

header {
  position: sticky;
  top: -15vh;
  z-index: 99;
}

.example-title {
    position: sticky;
    top: var(--chap-h);
    z-index: 2;
}

[] 开课啦 - opening

[] 强军梦强国梦

[] 粘性表格标题

. 不能直接对表格使用粘性定位

. 使用额外的容器包裹表格，当表格内容超出容器高度时，表格的表头粘性定位在容器顶部

. 分别对 <caption> 和 <thead> 使用粘性定位

table caption {
  position: sticky;
  top: 0;
}

table thead {
  position: sticky;
  top: 30px;
  text-align: left;
  background-color: #fff;
  z-index: 1;
}

[] JS粘性定位 - 网站顶部导航、网站顶部导航 - codepen

. 滚动到一定距离后，添加粘性类

let nav = document.querySelector("nav");
window.addEventListener("scroll", () => {
	if (window.scrollY >= nav.offsetTop) {
		nav.classList.add("sticky");
	}
});

总结与作业 Summary & Homework

总结 Summary

粘性定位的使用

几种定位的比较

类别	说明
relative	相对定位；未脱离文档流；占位置；相对于自身移动
absolute	绝对定位；脱离文档流；不占位置；相对于带有定位属性的祖先
fixed	固定定位；脱离文档流；不占位置；相对于视口
sticky	黏性定位；未脱离文档流；占位置；相对于有滚动条的祖先

作业 Homework

1. 利用粘性定位属性，完善个人网站；

2. 表格首列固定如何实现？同时固定首行和首列呢？

3. 办公文档 Excel 中，如何冻结表头？