求淘宝网固定页面导航到顶部效果

开始没有滚动到导航栏时，一切都不变，当页面位置超过导航栏时，导航始终显示在了顶部
有没有这样的DEMO,谢谢

解决方案 »

  1.   

    http://sc.chinaz.com/moban/index.html
    你去这里找找，我以前在这里看到过
      

  2.   

    使用CSS样式 position: fixed; 
     对象脱离常规流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
    PS：IE6不支持fixed.
      

  3.   

    http://sc.chinaz.com/moban/130102432390.htmhttp://sc.chinaz.com/moban/121118083640.htmhttp://sc.chinaz.com/moban/120926569350.htm这里有三个，其中第一个我觉得比较符合你的要求
      

  4.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style>
        *
        {
            margin:auto; text-align:center; padding:auto;
        }
        </style>
        <script src="/Scripts/jquery-1.4.1.js"></script>
        <script>
            var _menu;
            jQuery(document).ready(function () {
                jQuery(window).scroll(function () {
                    var _offset = jQuery(".menu").offset();
                    if (jQuery(window).scrollTop() >= _offset.top) {
                        if (_menu == undefined) {
                            _menu = jQuery(".menu").clone(true).insertAfter(jQuery(".menu"));
                            jQuery(_menu).css("left", _offset.left);
                            jQuery(_menu).css("position", "absolute");
                        }
                        jQuery(_menu).css("top",jQuery(window).scrollTop());
                    }
                    else {
                        if (_menu != undefined) {
                            jQuery(_menu).remove();
                            _menu = null;
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div class="main">
        <div style="width:500px; height:100px; background-color:Blue;"></div>
        <div class="menu" style="width:500px; height:50px; background-color:Red;">这里是导航</div>
        <div class="body" style="width:500px; height:1050px; background-color:Gray;">这里是内容</div>
        </div>
         </form>
    </body>
    </html>
      

  5.   

    http://blog.csdn.net/joyhen/article/details/8717653