Question

今天我查看了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中执行此操作。任何帮助都会受到赞赏！

Answer 1

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

Answer 2

试试这个，不用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>

仅使用页面滚动条滚动div的左侧

2 个答案: