html左侧边栏表头固定,前端, 如何让左侧边栏(大纲栏)固定不动

2016/12/6

问题

如图所示, 左边是大纲栏,右边是详情栏(其实就是一本书一样)

想在问题:

滚动屏幕时, 越到下面, 就会看不到大纲栏

需要再次滚动到上面来, 点击大纲, 很恼人

由于不熟悉前端, 相关关键词也不好组织, 故没有搜索到很好的结果.

相关截图

上下文环境

<style>

.main{

width:1366px;

border-right: solid 1px #d6dfea;

position:absolute;

top:67px;

margin-left: -683px;

left: 50%;

bottom:40px;}

.main.leftDiv{

height:100%;

border: 1px solid #d6dfea;

width:268px;

float:left;

margin-bottom:40px;

overflow: auto;

/*以上设置是重点必须的*/

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

line-height:40px;

}

.main.right{

height:100%;

margin-left:268px;

/*以上设置是重点必须的*/

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

overflow: auto;

line-height:40px;

}

</style>

<div class="main">

<div class="left"></div>

<div class="right"></div>

</div>

可以这样试试将左菜单的高度固定，右边自适应高度，自动添加对应滚动条

左侧设置固定定位

position:fixed

,设置自己的滚动条

左侧设置固定定位position:fixed

设置自己写个滚动事件 计算出左侧的maigin-top