side-nav-bar.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--360 浏览器在读取到这个标签后，立即切换对应的极速核-->
    <meta name="renderer" content="webkit">
    <!--优先使用 IE 最新版本和 Chrome-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!--缩放比例为1-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <title>侧边浮动导航栏</title>
    <style>

        * {
            margin: 0;
            padding: 0;
        }
        body{
            height: 1600px;
            overflow-y: auto;
        }
        ul{
            position: absolute;
            left: 0;
            top: 100px;
            height: 120px;
            width: 60px;
            color: #333;
            font-size: 14px;
            list-style: none;
        }
        ul.fixed{
            position: fixed;
            top: 0;
        }
        ul li{
            float: left;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
            width: 100%;
            text-align: center;
            background-color: #eee;
        }
    </style>
</head>
<body>

<ul class="">
    <li>首页</li>
    <li>关于</li>
    <li>联系</li>
</ul>

</body>
<script src="./ready.js"></script>
<script>
    document.ready(function () {

        var sidebar = document.getElementsByTagName('ul')[0];
        var top = sidebar.offsetTop;

        window.addEventListener('scroll', function () {
            var wtop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
            if(wtop < top){
                sidebar.classList.remove('fixed');
            }else{
                sidebar.classList.add('fixed');
            }
        })

    });

</script>
</html>