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>
原文地址：https://www.cnblogs.com/yinwangyizhi/p/9041797.html
时间： 2024-10-07 10:25:06