问题：在实际项目中，文档中心样式排版场景，具体表现为左侧为目录，右侧为文档内容，上篇文章中说到左侧目录如何与右侧文档内容进行定位。本文主要是实现左侧目录如何满足条件固定在屏幕中。
1、方案一：可采用固定定位的方式将左侧目录固定在某个位置，当左侧目录小于右侧文档内容高度或在最下方存在footer组件时，可采用fix的方式进行固定。
具体实现：
首先，对左侧目录进行定位处理，其中，fixTop为距离浏览器上方的距离，由于在该项目中，左侧目录不是贴近页面最左侧，需要进行left处理。
其次，监听页面滚动，scrollTop为监听到的滚动的距离。
监听滑动的距离后，对左侧目录进行fixTop的处理，因为本项目中存在头部，所以当滑动距离小于头部距离（height）时，左侧目录和右侧文档一起向上滑动，fixTop=height-v；当滑动距离和头部距离相等时，左侧目录吸顶，停止滑动，右侧文档继续向上滑动，其中fixTop=0；当右侧文档底部滑动到与左侧目录底部相平时，左侧目录不再吸顶，和右侧目录一起向上滑动，fixTop可由以下公式计算得到。
其中，clientHeight为页面可视窗口大小，fixHeight为左侧目录的高度，bodyHeight为整个滑动的范围。
由于不同浏览器窗口大小不同，该左右两侧内容是居中显示，所以左侧目录距离页面左边距离也不同，所以需要计算fixLeft的距离。
由于左侧目录采用固定定位会脱离文档流，右侧文档会跑到左侧目录之下，所以需要对右侧目录进行margin-left：左侧目录宽度。所以，基于该方法会有一个问题，如果底部存在footer组件，左侧目录高度大于右侧文档内容，则左侧目录会跑到footer组件之上，该问题后续可看看如何解决。
2、方案二：可采用stacky定位，该方法可不用监听滑动距离，设置左侧目录最大高度为100%可视高度。
具体实现：
该方法中由于设置了左侧目录最大高度为100%可视高度，当目录中的内容超出了该高度，则出现滚动条。该方法底部出现footer组件，则左侧目录不再吸顶。
以上两种方法各有不足之处，第一种方法由于采用了固定定位脱离了文档流，一旦存在其他组件，其他组件有可能会被覆盖；第二种方法由于限定了最大高度，则左侧目录内容超过该高度会导致出现滚动条。
