吸顶条

吸顶条
1.现获取元素的绝对位置;
2.在滚动的事件,获取滚动的高度,判断滚动的高度大于等于元素的绝对位置时,元素设置固定定位,反之为静态的
3.设置一个相同的div元素,当固定定位的时候显示,反之隐藏;

js部分:

    <script type="text/javascript" src='jq1.7.2/jquery.js'></script>    <script type="text/javascript">    $(function () {        // 先获取div向上的绝对位置        var top = $('div').offset().top;        console.log(top);        $(window).scroll(function () {            var scrollTop = $(window).scrollTop();            if (scrollTop >= top) {                // 让吸顶条的position:fixed;显示替代的条                $('div').eq(0).css('position','fixed');                $('#bar').show();            } else {                $('div').eq(0).css('position','static');                $('#bar').hide();            }        });    })    </script>

css部分:

    <style type="text/css">        * {            margin: 0;            padding: 0;        }        div {            width: 100%;            height: 50px;            font-size: 30px;            line-height: 50px;            text-align: center;            background: #ccc;            left: 0;            top: 0;        }        #bar {            display: none;        }    </style>

html部分:

    <h1>明天</h1>    <h1>明天</h1>    <h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1>    <h1>嘿嘿</h1>    <div>后天的内容</div>    <div id='bar'></div>    <h1>哈哈1</h1>    <h1>哈哈2</h1>    <h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1>