固定导航的特效代码，超级实用

洪七公 · 发表于 2022-4-10 12:45:35

今天乞丐在美化一个房产头部菜单代码的时候，需要做到导航随着页面下拉固定在顶部的位置，但是还得照顾到菜单上部分的内容，这里给出一段代码，效果非常不错，你可以保存到本地的html页面直接双击预览效果就可以

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
height: 2000px;
}
#wrap {
background-color: rgba(0, 0, 0, 0.2);
width: 100%;
height: 100px;
}
#wrap[data-fixed="fixed"] {
position: fixed;
top: 0;
left: 0;
margin: 0;
}
.content {
height: 2000px;
}
p {
height: 500px;
}
</style>
<body>
<div class="box">
<p>
<div id="wrap"></div>
</p>
<div class="content">
hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world
hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello
world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world
hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world
hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world
hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello
worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello
world hello world hello world hello worldhello world
</div>
</div>
</body>
<script>
var obj = document.getElementById("wrap");
var ot = obj.offsetTop;
document.onscroll = function() {
var st = document.body.scrollTop || document.documentElement.scrollTop;
obj.setAttribute("data-fixed", st >= ot ? "fixed" : "")
}
</script>
</html>

复制代码

		自动登录	找回密码
密码			会员注册

[CSS/Html] 固定导航的特效代码，超级实用