导航条随滚动条上下滚动

导航条随滚动条上下滚动，就像美丽说的导航条一样。没办法，本人js太差，望前辈告知

解决方案 »

  1.   


    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset="gb2312" />
            <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>
                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 = sTop + 'px';
                        }else{
                            el.style.top = elTop + 'px';
                        }
                    }
                }
                toolbar('test');
            </script>
        </body>
    </html>这个意思？
      

  2.   

    楼上的意思是对的，不过你这样上面那个div随着滚动条上下移动晃动很厉害我把你代码改了下
    <!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>