版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lyxuefeng/article/details/81813487
效果:当页面产生滚动时,导航栏固定在浏览器可视区域顶部
思路:首先得到导航栏的offsetTop或导航栏上面区域的整体盒子的offsetHeight,然后与页面的滚动距离scrollTop比较,大于则固定,小于则取消固定。
关键知识:scrollTop,onscroll事件
具体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定导航栏</title>
<style>
*{
margin:0;padding:0
}
body {
margin: 0 auto;
width: 1423px;
}
img{
vertical-align: top;
}
.main{
margin:0 auto;
width:1000px;
margin-top:10px;
}
.fixed {
position: fixed;
top: 0;
}
</style>
</head>
<body>
<div class="top" id="top">
<img src="images/top.png" alt=""/>
</div>
<div class="nav" id="Q_nav">
<img src="images/nav.png" alt=""/>
</div>
<div class="main">
<img src="images/main.png" alt=""/>
</div>
</body>
<script src="my.js"></script>
<!-- 注意:防止页面渲染问题,把js导入放body后面 -->
<script>
var nav = $('Q_nav');
var Top = $('top');
var navTop = nav.offsetTop;
// var topH = Top.offsetHeight;
// console.log(navTop,topH);
window.onscroll = function(){
var scrollTop = scroll().top;
// console.log(scrollTop);
if(scrollTop >= navTop){
nav.className = "nav fixed";
}else{
nav.className = "nav";
}
}
//注:上述代码在firefox有bug,因为它不支持得到img撑开的高度(使用的firefox61)
</script>
</html>
my.js文件:
function $(id){
return document.getElementById(id);
}
function scroll(){
if(window.pageYOffset != null){
//ie9+和各种最新浏览器,注意:为什么使用!=null,因为加载完页面pageYOffset就是0
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}else if(document.compatMode == "CSS1Compat"){
//不是怪异模式(即声明了DTD)
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}else{
//怪异模式(未声明DTD)
return {
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
}
具体效果可见:固定导航栏