网页特效之固定导航栏

效果：当页面产生滚动时，导航栏固定在浏览器可视区域顶部
思路：首先得到导航栏的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
			}
		}
	}

具体效果可见：固定导航栏

网页特效之固定导航栏

猜你喜欢