0

今天我在foursquare.com网站上看了一下，当我在我所在的城市搜索一些东西时，它会返回我的结果页面，而在结果页面中，当我使用页面滚动条向下滚动页面时，只有左栏包含向下滚动的地方详细信息的列表视图，而不是页面的右侧，我只想知道如何使用 jquery 或 javascript 来完成。假设我有以下 html div：

     <html><body>
       <div id="wrapper" style="width:900px;height:1200px;margin: 0 auto;">

        <div id="left_column" style="width:300px;height:1200px; float:left;border:1px solid #000000;">
         <ul><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li></ul>
            </div>

      <div id="middle_column" style="width:300px;height:1200px; float:left;border:1px solid #000000;"></div>

        <div id="right_colunm" style="width:300px;height:1200px; float:left;border:1px solid #000000;"></div>
      </div>

      </body></html>

当我使用页面滚动条时，只有left_column中的内容被滚动，而不是中间的和右边的，任何人都可以告诉我如何在jquery中做到这一点。任何帮助将不胜感激！

4

2 回答 2

2

它实际上只是 CSS。背景和标题中的地图设置为position: fixed使它们在页面的其余部分滚动时停留在一个位置。

于 2012-11-22T21:15:34.030 回答
0

试试这个，没有 jquery

<!DOCTYPE html>
<html>

<style type="text/css">
#left {
  overflow: auto;
  left: 0;
  width: 149px;
  border-right: 1px solid #000;
  position: relative;
}
#right {
  position: fixed;
  top:0;
  margin-left: 200px;
  height: 100%;
  float:left;
}
</style>
</head>

<body>

<div id="left"> 
  <ul>
    <li>Start</li>

    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>

    <li>End</li>
  </ul>
</div>

<div id="right"> 
  <div style="float:left">
    <p>Content start</p>
    <p>Content</p>
    <p>Content</p>  
    <p>Content</p>
    <p>Content</p>
    <p>Content end</p>
  </div>
  <div style="margin-left:10px;float:left">
    <p>right start</p>
    <p>right</p>
    <p>right</p>
    <p>right end</p>
  </div>
</div>   
</body>
</html>
于 2012-11-22T22:09:08.103 回答