该代码示例展示了如何使用CSS设置导航栏和内容区域的样式，并用JavaScript监听页面滚动，当滚动超过一定距离时将导航栏固定在顶部。当页面滚动回到顶部，导航栏恢复原样式。
<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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
