滚动固定导航代码

滚动固定导航：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
    body{ margin:0;
        padding: 0; }
    .top{ width:100%;  height: 100px; background: aquamarine;}
    .nav{ width:100%; height: 40px; background: darkgreen; }
    .content{ margin:0 auto; width:100%; height:1600px; background: cadetblue;}
    .content img{ width:100%;}
    .footer{ width:100%; height: 80px; background: darkgreen;}
    .navfixed{ position: fixed; top:0px;}
</style>
    <title>Title</title>

</head>
<body>

<div class="top" id="dv1"></div>
<div class="nav" id="dv2"></div>
<div class="content" id="dv3">
    <img src="images/bg.jpg" alt="" >
</div>
<div class="footer" id="dv4"></div>

<script>
    window.onscroll = function(){
        if(document.documentElement.scrollTop>=100){
            document.getElementById("dv2").className="nav navfixed";
            document.getElementById("dv3").style.marginTop="40px"
        }else{
            document.getElementById("dv2").className="nav";
            document.getElementById("dv3").style.marginTop="0px"
        }

    }

</script>
</body>
</html>

相关阅读:
UART协议
芯片时钟体系(take example as s3c2440)
PCIe协议
I2C协议
SPI协议
嵌入式相关术语列表
TreeView控件数据绑定之：数据库数据递归绑定
连接SQL Server 数据库的三种方式
JS小功能之：五角星评论
MVC学习之开发技巧总结（1）

原文地址：https://www.cnblogs.com/seeding/p/11862899.html