<style>
nav{
width: 1200px;
height: 100px;
background-color: bisque;
margin: 0 auto;
}
.con{
width: 1200px;
height: 1200px;
margin: 0 auto;
border: 2px solid red;
}
</style>
</head>
<body>
<nav>导航栏</nav>
<div class="con">内容区域</div>
<script>
let nav = document.querySelector("nav")
// 1.监听页面的滚动
document.onscroll = function(){
console.log(window.pageYOffset);
if(window.pageYOffset >= 110){
// 固定
nav.style.position = "fixed";
nav.style.top = 0;
}else{
// 静态定位
nav.style.position = "static";
}
}
</script>
