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

来源：互联网发布：笨方法学python ex47 编辑：程序博客网时间：2024/05/01 13:05

第一种情况：

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

<!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>