zoukankan html css js c++ java

js练习滚动固定

滚动条向下到一定程度菜单栏就固定到顶部，滚动条回到顶部菜单栏恢复

<html>
<head>
<meta charset="utf-8">
<title>滚动固定</title>
<style type="text/css">
    *{ margin:0 auto; padding:0;}
    #header{ width:100%; height:200px;}
    #nav{ width:100%; height:50px; background-color:#00F; top:0px;}
    .content{ width:800px; height:300px; background-color:#0FF; margin-top:20px}
</style>
</head>

<body>
<div id="header"></div>
<div id="nav"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</body>
</html>
<script type="text/javascript">
    var nav = document.getElementById("nav");
    /*
        监听滚动，垂直方向大于200就锁定顶部，小于200就解锁
    */
    window.onscroll = function()
    {
        if(window.scrollY>=200)
        {
            nav.style.position = "fixed";
        }
        else
        {
            nav.style.position = "";
        }
    }

</script>

　　初始

向下移动

回到顶部

查看全文

相关阅读:
sequelize 批量添加和更新数据 bulkCreate
js 线程和进程的关系
 mysql 索引笔记1
mysql 主键
 loj2292 「THUSC 2016」成绩单
 loj2291 「THUSC 2016」补退选
 cf984c Finite or not?
cf984e Elevator
loj2540 「PKUWC 2018」随机算法
 luoguT30204 偷上网

原文地址：https://www.cnblogs.com/zxbs12345/p/8005225.html

js练习 滚动固定

js练习滚动固定