固定导航栏

来源：互联网发布：傻黑的淘宝店编辑：程序博客网时间：2024/05/22 10:44

index.html页面代码

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        *{            margin: 0;            padding: 0;        }        body{            height: 3000px;        }        img{            vertical-align: top;        }        .fixed {            position: fixed;            top: 0;            left: 0;        }    </style></head><body><div class="top" id="top"><img src="images/1.jpg" alt=""/></div><div class="nav" id="nav"><img src="images/2.jpg" alt=""/></div><div class="main">    <img src="images/3.jpg" alt=""/>    <img src="images/3.jpg" alt=""/>    <img src="images/3.jpg" alt=""/>    <img src="images/3.jpg" alt=""/>    <img src="images/3.jpg" alt=""/></div></body></html><script src="my.js" type="text/javascript"></script><script>    var top = $("top");    var nav = $("nav");    var navTop = nav.offsetTop;//    var navTop = top.offsetHeight;    window.onscroll = function () {        if(scroll().top >= navTop){            nav.className = "nav fixed";        }else {            nav.className = "nav";        }    }</script>

my.js代码

/** * Created by Administrator on 2016/10/17. */function $(id){return document.getElementById(id)}function scroll(){    if(window.pageYOffset != null){ //ie9+和其他新浏览器        return{            left:window.pageXOffset,            top:window.pageYOffset        }    }else if(document.compatMode == "CSS1Compat"){ //检测浏览器是否是怪异模式,就是没有声明dtd.BackCompat未声明，CSS1Compat声明了的。        return{            left:document.documentElement.scrollLeft,            top:document.documentElement.scrollTop        }    }    return {        left:document.body.scrollLeft,        top:document.body.scrollTop    }}window.onscroll = function () {    console.log(scroll().top);    document.title = scroll().top;}

0 0