position: sticky; 这东西来自css3,并且瞬间就完成了置顶的效果.
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????.a{ //定位头部置顶效果 ???????????top: 0; ???????????position: sticky; ???????} ???????.b{ //当纯的给个滚动的高度 ???????????width: 100%; ???????????height: 3000px; ???????} ???????????</style></head><body> ???<div class="a">awsfwegwea</div> ???<div class="b"> ???????11111111111111111111111111111111111111 <br> ???????????????????22222222222222222<br> ???????333333333333333333333333333333333333333 <br> ???????4444444444444444444444444444444 <br> ???????555555555555555555555555555 <br> ???????666666666666666666666 <br> ???????77777777777777777777777 <br> ???????88888888888888888888888888888 <br> ???????99999999999999999999999999999999 <br> ???</div></body></html>复制粘贴滚动滑轮即可见到效果……（至于兼容问题，暂且就不考虑了。反正俺也不会！呵呵吧。。。）
由于没什么写的，就顺便将position定位的属性都
static：
- --即默认不应用
relative（相对定位）：
absolute（绝对定位）：
- --一般这两个会组合使用，所谓的自绝父相.
- 即.relative盒子里面有.absolute 而absolute里需要加top|botton 和 left|right 进行相对于.relative里的空间定位.
fixed：
- 相对显示器定位,即屏幕本身,不会随滚动条的变化而变化
- 同样需要加top|botton 和 left|right 进行空间定位.
center：与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。
（CSS3）page：与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。
- 官方定义如上,可试了半天也没效果,然后看到游览器兼容性列表显示全部不支持后……我就释然了
（CSS3）sticky：对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）
- 这个就实现了鼠标下滚，拥有这个样式的板块在网页上置顶的效果
- 支持的游览器有：Firefox（32.0+），Safari（6.1-9.0-webkit-），iOS Safari（6.0-9.0-webkit-）。当前下能支持的。
以下为简单导航效果。
主要是class=“a”和class=“b”两部分。
a类是导航，b则是内容，因为懒，所以内容就对付了。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????.a{ ???????????top: 0; ???????????position: sticky; //这是那个css3样式 ???????} ???????*{padding: 0;margin: 0;} ???????nav{ //这是个导航 ???????????width: 100%; ???????????background: #284f86; ???????????overflow: hidden; ???????} ???????.ju{ ???????????width: 80%; ???????????margin: 0 auto; ???????} ???????.ju ul{ ???????????list-style-type: none; ???????} ???????.ju ul li{ ???????????padding: 0 10px; ???????????float: left; ???????????overflow: hidden; ???????} ???????.ju ul li a{ ???????????padding: 10px 20px; ???????????color: #fff; ???????????display: block; ???????????text-decoration: none; ???????} ???????.ju ul li a:hover{ ???????????background: #fff; ???????????color: #f00; ???????????border-radius: 5px; ???????} ??????.b{ ???????????width: 80%; ???????????height: 800px; //因为没内容，所以就先加了个高度 ???????????margin: 0 auto; ???????} ???</style></head><body> ???????<nav class="a"> ???????<div class="ju"> ???????????<ul> ???????????????<li><a href="#">首页</a></li> ???????????????<li><a href="#">教科书</a></li> ???????????????<li><a href="#">工具书</a></li> ???????????????<li><a href="#">绘图书</a></li> ???????????????<li><a href="#">程序书</a></li> ???????????</ul> ???????</div> ???</nav> ???<div class="b"> ???????11111111111111111111111111111111111111 <br> ???????????????????22222222222222222<br> ???????333333333333333333333333333333333333333 <br> ???????4444444444444444444444444444444 <br> ???????555555555555555555555555555 <br> ???????666666666666666666666 <br> ???????77777777777777777777777 <br> ???????88888888888888888888888888888 <br> ???????99999999999999999999999999999999 <br> ???</div></body></html>鼠标滚动,导航置顶.纯css3的position: sticky;
原文地址：https://www.cnblogs.com/yinwangyizhi/p/9041797.html