固定导航栏

最新推荐文章于 2023-12-07 12:38:47 发布

python基础教程

最新推荐文章于 2023-12-07 12:38:47 发布

阅读量304

点赞数

分类专栏： 01前端基础教程html_css_js

本文链接：https://blog.csdn.net/stopcpp/article/details/52843315

版权

01前端基础教程html_css_js 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

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;
}