Jquery div滚动和固定的顶部和底部div（绑定到x和y轴）

我有一个图表-是用PHP/MySQL创建的计算关节预期寿命的…真的很大

加载页面时，两个年龄范围的x轴和y轴位于容器div内。我需要能够滚动容器div（垂直和水平），并使左侧和顶部容器（x和y轴）与图表中的相应值保持一致，但也保持在容器中

<div id="container">
    <div id="top_container">X-axis: age range for person one</div>
    <div id="left_container">Y-axis: age range for person two</div>
    Content Here - overflow:hidden;
    (a huge PHP/MySQL driven chart)
</div>

希望这是有意义的…x和y（顶部和左侧）列需要固定到主内容区域（因此保持准确），并且需要固定到容器区域的顶部和左侧

提前谢谢

编辑：我发现了这个问题……比我想象的要简单，但如果有人有类似的问题，请告诉我，我会帮助解决。基本思路如下：

$('#container_main').scroll(function(){
        $('#top_container').css({
            'top': $(this).scrollTop()
        });
        $('.row_header').css({
            'left': $(this).scrollLeft() -51 //needed tweaking for position
        });
    });

在“固定”元素上的定位需要是“绝对”的

---

Cheers

在页面顶部创建一个固定位置的x轴容器div。在该固定div中，使用轴的内容创建一个水平滚动div

创建一个y轴容器div，其固定位置位于页面左侧。在该固定div中，使用轴的内容创建一个垂直可滚动的div

创建具有固定位置的内容容器div。在该固定div中，创建一个水平和垂直可滚动的div

然后，在滚动内容时使用javascript（我使用jQuery，但这不是必需的）滚动轴

这很有趣，我觉得它看起来很棒

HTML:

JS:

---

Pabo-谢谢你的代码…我在理解问题后编辑了我的问题，并意识到我没有尽可能清楚地解释问题。很好的干净代码，但我需要更多的功能，并且需要x轴来“粘贴”到左右滚动。

$('#container_main').scroll(function(){
        $('#top_container').css({
            'top': $(this).scrollTop()
        });
        $('.row_header').css({
            'left': $(this).scrollLeft() -51 //needed tweaking for position
        });
    });

<div id="x-axis">
    <div class="scrollablecontent">
        x-axis
        <p>
        <span class='tick'>1</span>
        <span class='tick'>2</span>
        <span class='tick'>3</span>
        <span class='tick'>4</span>
        <span class='tick'>5</span>
        <span class='tick'>6</span>
        <span class='tick'>7</span>
        <span class='tick'>8</span>
        <span class='tick'>9</span>
        <span class='tick'>10</span>
        <span class='tick'>11</span>
        <span class='tick'>12</span>
        <span class='tick'>13</span>
        <span class='tick'>14</span>
        <span class='tick'>15</span>
        <span class='tick'>16</span>
        <span class='tick'>17</span>
        <span class='tick'>18</span>
        <span class='tick'>19</span>
        <span class='tick'>20</span>
    </div>
</div>

<div id="y-axis">
    <div class="scrollablecontent">
        y-axis
        <span class='tick'>1</span>
        <span class='tick'>2</span>
        <span class='tick'>3</span>
        <span class='tick'>4</span>
        <span class='tick'>5</span>
        <span class='tick'>6</span>
        <span class='tick'>7</span>
        <span class='tick'>8</span>
        <span class='tick'>9</span>
        <span class='tick'>10</span>
        <span class='tick'>11</span>
        <span class='tick'>12</span>
        <span class='tick'>13</span>
        <span class='tick'>14</span>
        <span class='tick'>15</span>
        <span class='tick'>16</span>
        <span class='tick'>17</span>
        <span class='tick'>18</span>
        <span class='tick'>19</span>
        <span class='tick'>20</span>
    </div>
</div>

<div id="content">
    <div class="scrollablecontent"><p>Bacon ipsum dolor sit amet beef salami pork loin ham sausage. Meatball tail short loin tenderloin doner. Porchetta filet mignon hamburger, drumstick kielbasa brisket pork pancetta. Pig sirloin doner leberkas chicken, salami ham beef ribs. Pastrami rump sausage tongue cow bresaola porchetta jowl chuck kevin beef sirloin kielbasa fatback. Bacon ball tip boudin meatball drumstick, cow flank rump beef ribs pancetta. Fatback pancetta rump shank meatloaf tri-tip.

        <p>Hamburger short ribs tri-tip salami capicola. Salami jowl ribeye, strip steak spare ribs prosciutto biltong pancetta pig ball tip brisket landjaeger venison sirloin. Ham hock swine beef ribs boudin tail shoulder. Biltong kielbasa venison chuck jowl strip steak. Capicola chicken chuck, rump short ribs meatball spare ribs prosciutto. Jowl pork pork belly hamburger corned beef ground round bacon brisket kevin sirloin. Hamburger frankfurter pork belly pork filet mignon chicken fatback short ribs, rump tenderloin salami kielbasa brisket andouille bacon.

        <p>Cow turkey landjaeger biltong leberkas bresaola filet mignon shoulder hamburger. Doner sirloin boudin beef ribs shankle ham bresaola pork chop beef pork belly rump short ribs jowl leberkas. Chicken swine biltong ham hock kielbasa sirloin ball tip hamburger meatloaf pork chop turkey pork belly tongue. Brisket bresaola sausage meatloaf ground round ball tip, drumstick pancetta capicola.

        <p>Kielbasa leberkas sausage turducken landjaeger shoulder. Beef shoulder biltong prosciutto ball tip, leberkas strip steak. Ham hock salami ball tip, jowl porchetta ground round frankfurter jerky doner tenderloin short loin. Cow shankle turkey, filet mignon chuck rump kielbasa turducken. Beef jerky landjaeger leberkas pork loin pastrami tongue.

        <p>Pastrami hamburger sausage ham boudin, beef jowl kevin porchetta shank meatball landjaeger ground round pork chop kielbasa. Pig cow ground round kielbasa short loin andouille, swine shankle turducken salami venison tenderloin kevin bacon shank. Shank corned beef capicola beef jerky, landjaeger spare ribs. Ham hock biltong frankfurter pig hamburger pork tri-tip boudin pork belly bacon.

        <p>Bacon ipsum dolor sit amet beef salami pork loin ham sausage. Meatball tail short loin tenderloin doner. Porchetta filet mignon hamburger, drumstick kielbasa brisket pork pancetta. Pig sirloin doner leberkas chicken, salami ham beef ribs. Pastrami rump sausage tongue cow bresaola porchetta jowl chuck kevin beef sirloin kielbasa fatback. Bacon ball tip boudin meatball drumstick, cow flank rump beef ribs pancetta. Fatback pancetta rump shank meatloaf tri-tip.

        <p>Hamburger short ribs tri-tip salami capicola. Salami jowl ribeye, strip steak spare ribs prosciutto biltong pancetta pig ball tip brisket landjaeger venison sirloin. Ham hock swine beef ribs boudin tail shoulder. Biltong kielbasa venison chuck jowl strip steak. Capicola chicken chuck, rump short ribs meatball spare ribs prosciutto. Jowl pork pork belly hamburger corned beef ground round bacon brisket kevin sirloin. Hamburger frankfurter pork belly pork filet mignon chicken fatback short ribs, rump tenderloin salami kielbasa brisket andouille bacon.

        <p>Cow turkey landjaeger biltong leberkas bresaola filet mignon shoulder hamburger. Doner sirloin boudin beef ribs shankle ham bresaola pork chop beef pork belly rump short ribs jowl leberkas. Chicken swine biltong ham hock kielbasa sirloin ball tip hamburger meatloaf pork chop turkey pork belly tongue. Brisket bresaola sausage meatloaf ground round ball tip, drumstick pancetta capicola.

        <p>Kielbasa leberkas sausage turducken landjaeger shoulder. Beef shoulder biltong prosciutto ball tip, leberkas strip steak. Ham hock salami ball tip, jowl porchetta ground round frankfurter jerky doner tenderloin short loin. Cow shankle turkey, filet mignon chuck rump kielbasa turducken. Beef jerky landjaeger leberkas pork loin pastrami tongue.

    </div>
</div>

#content {
  position: fixed;
  top: 50px;
  left: 50px;

  height: 100%;
  width: 100%;
  overflow-x: auto;

  padding: 10px;

  background-color: #cc99ff;
}

#content .scrollablecontent{
    width: 2000px;
}


#x-axis {
  position: fixed;
  top: 0px;
  left: 50px;

  width: 100%;
  height: 70px; /*pushes scroll bar down, out of sight */

  overflow-x: auto;
  overflow-y: hidden;

  background-color: #99ccff;
  text-align: center;
}

#x-axis .scrollablecontent {
  width: 2000px;
}

#x-axis .scrollablecontent .tick {
  margin-right: 75px;
}

#y-axis {
  position: fixed;
  top: 50px;
  left: 0px;

  height: 100%;
  width: 70px; /*pushes scroll bar right, out of sight*/
  overflow-x: hidden;
  overflow-y: auto;

  background-color: #99ccff;
}


#y-axis .scrollablecontent {
  height: 2000px;
}

#y-axis .scrollablecontent .tick {
  display: block;
  margin-bottom: 15px;
  margin-right: 20px; /*difference between widths of y-axis and y-axis scrollable content*/
  text-align: right;
}

$('#content').on('scroll', function() {
  $('#content, #x-axis').scrollLeft($('#content').scrollLeft());
  $('#content, #y-axis').scrollTop($('#content').scrollTop());
});

$('#x-axis').on('scroll', function() {
  $('#content').scrollLeft($('#x-axis').scrollLeft());
});

$('#y-axis').on('scroll', function() {
  $('#content').scrollTop($('#y-axis').scrollTop());
});