参考：https://blog.csdn.net/q3585914/article/details/69946478
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{ padding: 0; margin: 0;}
ul li{ list-style: none;}
.container{ width:500px; height: 500px; margin: 20px auto 0; border: 1px solid #ddd;}
.leftbox{ width: 100px; float: left; }
.lf_regular_head{ line-height: 29px; text-align: center; border-bottom: 1px solid #ddd; background: #e9f8ff}
.lf_con{ width: 100px; height:470px; overflow-y:hidden;}
.lf_con li{ text-align: center; line-height: 29px; text-align: center;border-bottom: 1px solid #ddd;}
.lf_con li:last-child{padding-bottom: 17px;}/*滑动到最底部对其解决*/
.rightbox{ float: left; width: 399px; border-left: 1px solid #ddd;}
.right_head{ width:100%; overflow: hidden;}
.right_head ul{ width:817px ; }
.right_head li,.right_box li{ float: left; width:99px; border-right:1px solid #ddd;line-height: 29px; text-align: center; border-bottom: 1px solid #ddd; background: #e9f8ff}
.right_head li:last-child{ padding-right: 17px;}/*滑动到最左侧对其解决*/
.right_box{ width: 100%;height:470px; overflow: auto;}
.right_box ul{width:800px ;}
</style>
</head>
<body>
<div class="container">
<div class="leftbox">
<div class="lf_regular_head">我不会动</div>
<div class="lf_con">
<ul>
<li>czcZ1</li>
<li>czcZ2</li>
<li>czcZ3</li>
<li>czcZ4</li>
<li>czcZ5</li>
<li>czcZ6</li>
<li>czcZ7</li>
<li>czcZ8</li>
<li>czcZ9</li>
<li>czcZ10</li>
<li>czcZ11</li>
<li>czcZ12</li>
<li>czcZ13</li>
<li>czcZ14</li>
<li>czcZ15</li>
<li>czcZ16</li>
<li>czcZ17</li>
<li>czcZ18</li>
<li>czcZ19</li>
<li>czcZ20</li>
</ul>
</div>
</div>
<div class="rightbox">
<div class="right_head">
<ul>
<li>我是表头</li>
<li>我是表头</li>
<li>我是表头</li>
<li>我是表头</li>
<li>我是表头</li>
<li>我是表头</li>
<li>我是表头</li>
<li>我是表头</li>
</ul>
</div>
<div class="right_box">
<ul>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>1</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>2</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>3</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>4</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>5</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>6</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>7</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>8</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>9</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>10</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>11</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>12</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>13</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>14</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>15</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>16</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>17</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>18</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>19</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
</ul>
</div>
</div>
</div>
<p class="aaaa">aa</p>
<script type="text/javascript" src="border/jquery-1.7.2.min.js" ></script>
<script>
$(function(){
$('.right_box').scroll(function(){
//获取滚动区域上滚动与左滚动的距离
var st=$('.right_box').scrollTop();
var sl=$('.right_box').scrollLeft();
//把向上滚动的距离赋值给左侧固定导航栏lf_con；
console.log('st:'+st+'sl:'+sl);
$('.lf_con').scrollTop(st);
$('.right_head').scrollLeft(sl)
})
})
</script>
</body>
</html>