顶部导航条跟随滚动条上下滚动或一直在底部显示

2013-04-15 11:51:42

第一种情况：

顶部导航条随滚动条上下滚动（代码来自网络）

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <style>
            body {
                height:2000px;
            }
            div {
                position:absolute; right:40px; top:40px;
                width:90%; height:30px;
                background:#ddd;
            }
        </style>
    </head>
    <body>
        <div id="test">滚动试试</div>
        <script type="text/javascript">
            function toolbar(el) {
                el = typeof el == 'string' ? document.getElementById(el) : el;
                var elTop = el.offsetTop;
                var sTop = 0;
                window.onscroll = function () {
                    sTop = document.body.scrollTop || document.documentElement.scrollTop;
                    if (sTop > elTop) {
                        el.style.top = "0";
                        el.style.position = "fixed"
                    } else {
                        el.style.top = elTop + 'px';
                        el.style.position = "absolute"
                    }
                }
            }
            toolbar('test');
        </script>
    </body>
</html> 

第二种情况：

导航一直在底部显示（个人修改）

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <style>
            body {
                height:2000px;
            }
            div {
                position:absolute; right:40px; bottom:0px;
                width:90%; height:30px;
                background:#ddd;
            }
        </style>
    </head>
    <body>
        <div id="test">滚动试试</div>
        <script type="text/javascript">
            function rollbar(bar) {
                bar = document.getElementById(bar);
                window.onscroll = function () {
                    bar.style.position = "fixed";
                    bar.style.bottom = "0";
                }
            }
            rollbar('test');
        </script>
    </body>
</html>