<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定导航栏</title>
<style>
*{
padding: 0;
margin: 0;
}
#nav{
position: absolute;
}
.img{
width: 1500px;
position: absolute;
}
div{
height: 500px;
width: 1000px;
margin: 0 auto;
}
.box1{
background-color: red;
}
.box2{
background-color: pink;
}
.box3{
background-color: darkcyan;
}
</style>
</head>
<body>
<nav id="nav">
<img class="img" id="img" src="project/img/nav.png">
</nav>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<script>
var oimg=document.getElementById('img')
window.onscroll= function (){
var ox= document.documentElement.scrollTop
var oy= document.documentElement.scrollLeft
oimg.style.top=ox+'px'
oimg.style.left=oy+'px'
}
</script>
</body>
</html>