一个欲儿的博客

一个欲儿的博客

HTML 吸顶效果
2022-05-24

就是说如何让屏幕滑动，但是顶部的东西跟着滑动滑动，始终固定在页面顶端


效果图

image.png


核心css代码

        position: sticky;
	top: 0;


<!DOCTYPE html>
<html>
<style>
* {
 margin: 0px;
 padding: 0px;
}

/* 导航条 */
.topnav {
	position: sticky;
	top: 0;
	width:80%;
	margin: auto;
  	overflow: hidden;
  	background-color: #333;
}
/* 导航链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* 链接 - 修改颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

</style>


<body>
<!--导航栏-->
<div class="topnav">
  <a href="http://www.anyuer.club">团队介绍</a>
  <a href="http://www.anyuer.club">科研成果</a>
  <a href="http://www.anyuer.club">出版论文</a>
</div>
<p style="height:1000px;">sss</p>
<p style="height:1000px;">sss</p>
</body>
</html>


发表评论: