模拟导航栏吸顶的效果

1.css部分

body {padding: 0px;margin: 0;}
.wrap {width: 600px;height: 500px;padding: 0 20px;}
#nav {width: 603px;height: 40px;background: #39f;color: #fff;line-height: 40px;text-align: center;padding: 0;margin: 0;list-style: none;overflow: hidden;}
#nav li { float: left;width: 200px;height: 60px;border-right: 1px solid #fff;}
.fix {position: fixed;top: 0px;left: 20px;}

2.html部分

<div class="wrap">
        <h1>文章标题</h1>
        <ul id="nav">
            <li>首页</li>
            <li>导航1</li>
            <li>导航2</li>
        </ul>
        <div class="con">
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
            <p>简单的吸顶效果</p>
        </div>
    </div>

3.js部分

<script type="text/javascript">
        var tit = document.getElementById("nav");
        //alert(tit);
        //占位符的位置
        var rect = tit.getBoundingClientRect(); //获得页面中导航条相对于浏览器视窗的位置
        var inser = document.createElement("div");
        tit.parentNode.replaceChild(inser, tit);
        inser.appendChild(tit);
        inser.style.height = rect.height + "px";

        //获取距离页面顶端的距离
        var titleTop = tit.offsetTop;
        //滚动事件
        document.onscroll = function() {
            //获取当前滚动的距离
            var btop = document.body.scrollTop || document.documentElement.scrollTop;
            //如果滚动距离大于导航条据顶部的距离
            if(btop > titleTop) {
                //为导航条设置fix
                tit.className = "clearfix fix";
            } else {
                //移除fixed
                tit.className = "clearfix";
            }
        }
    </script>