› 首页 ›HTML/css/Js›正文

HTML 吸顶效果

欲儿 HTML/css/Js 2022-05-24 231 0

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

效果图

核心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>

版权声明

本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。

评论