求美餐网订餐车的效果，实在搞不定了。拜托了。

美餐网的那个订餐车的效果，随屏幕滚动但不哆嗦的DIV。。网址：www.meican.com最好是基于jquery的。

解决方案 »

  1.   

    html：
    <div id="topNavWrapper">
       <div id="topNav">
    xxxxxxxxxx
       </div>
    </div>
    css：#topNavWrapper { width:900px;text-align: left;height: 40px;margin: 0px auto;z-index:100;_position: relative ;_top:0px;}
    #topNav { width: 900px;float: left;display: block;z-index: 100;overflow: visible;position: fixed;top: 0px; /* position fixed for IE6 */_position: absolute;_top: expression(documentElement.scrollTop + "px");background:#ececec;border-bottom:1px #bdbdbd solid;border-right:1px #bdbdbd solid;height: 40px;}
      

  2.   

    现在用的这个，一滚动屏幕，层是哆嗦的郁闷   <script type="text/javascript">
            $(window).scroll(function () {
                var topPx = $(document).scrollTop();            $('#cateorderForm').css('position', 'absolute');
                $('#cateorderForm').css('top', topPx);
                if (topPx <= 160) {
                    $('#cateorderForm').css('position', '');
                    $('#cateorderForm').css('top', '160px');
                }
            });    </script>
      

  3.   

    在非ie6直接用position:fixed
    IE6下才用你那抖动的方法。
      

  4.   

    完整代码：<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style>
    #topNavWrapper { 
    width:959px;
    text-align: left;
    height: 40px;
    margin: 0px auto;
    z-index:100;
    _position: relative ;
    _top:0px;
    }#topNav { 
    width: 959px;
    float: left;
    display: block;
    z-index: 100;
    overflow: visible;
    position: fixed;
    top: 150px; 
    _position: absolute;
    _top: expression(documentElement.scrollTop + "px");
    background:#ececec;
    border:1px #bdbdbd solid;
    height: 40px;
    }
    </style>
    </head><body>
    <div id="topNavWrapper">
       <div id="topNav">
    ssssssssssssssssssssssssssssssssssssssssss
       </div>
    </div>
    <table width="960" border="0" align="center" cellpadding="0">
      <tr>
        <td height="40" align="center" bgcolor="#00CC99">asddasdas</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">dsadsad</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">dsadsad</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">d</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">sad</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">asd</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">as</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">d</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">as</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">dasd</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">sad</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">sa</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">ds</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">adasd</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">sad</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">sa</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">d</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">as</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">dsadas</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">d</td>
      </tr>
      <tr>
        <td height="40" align="center" bgcolor="#00CC99">asddasdas</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">dsadsad</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">dsadsad</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">d</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">sad</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">asd</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">as</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">d</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">as</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">dasd</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">sad</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">sa</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">ds</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">adasd</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">sad</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">sa</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">d</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">as</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">dsadas</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#00CC99">d</td>
      </tr>
    </table>
    </body>
    </html>