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>
