如何将网页中的目录完美地浮动在主要内容的侧边距中
诸安，我是之于言者。
去年我在编写戴森球计划wiki时遇到一个需求：
将文档流中的目录提取出来，使之固定在屏幕左侧。
简而言之，就是将这样的网页：
转化成这样的网页：
原来的网页源代码可以简写成这个样子：
<!DOCUMENT html>
<html>
<head>
<style>
:root{
--border--:1px solid rgba(5, 109, 232, 0.5);
}
#content{
max-width:1080px;
margin:24px auto;
border:var(--border--);
padding:24px;
}
h1{border-bottom:var(--border--);}
#toc{border:var(--border--);max-width:20%;color: rgba(5, 109, 232, 0.5);}
</style>
</head>
<body>
<div id="content">
<h1>标题</h1>
<ul id="toc">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<h2>第一项</h2>
<p>
春江潮水连海平，海上明月共潮生。滟滟随波千万里，何处春江无月明！江流宛转绕芳甸，月照花林皆似霰。空里流霜不觉飞，汀上白沙看不见。江天一色无纤尘，皎皎空中孤月轮。江畔何人初见月？江月何年初照人？人生代代无穷已，江月年年望相似。不知江月待何人，但见长江送流水。白云一片去悠悠，青枫浦上不胜愁。谁家今夜扁舟子？何处相思明月楼？可怜楼上月徘徊，应照离人妆镜台。玉户帘中卷不去，捣衣砧上拂还来。此时相望不相闻，愿逐月华流照君。鸿雁长飞光不度，鱼龙潜跃水成文。
</p>
<h2>第二项</h2>
<p>
春江潮水连海平，海上明月共潮生。滟滟随波千万里，何处春江无月明！江流宛转绕芳甸，月照花林皆似霰。空里流霜不觉飞，汀上白沙看不见。江天一色无纤尘，皎皎空中孤月轮。江畔何人初见月？江月何年初照人？人生代代无穷已，江月年年望相似。不知江月待何人，但见长江送流水。白云一片去悠悠，青枫浦上不胜愁。谁家今夜扁舟子？何处相思明月楼？可怜楼上月徘徊，应照离人妆镜台。玉户帘中卷不去，捣衣砧上拂还来。此时相望不相闻，愿逐月华流照君。鸿雁长飞光不度，鱼龙潜跃水成文。
</p>
<h2>第三项</h2>
<p>
春江潮水连海平，海上明月共潮生。滟滟随波千万里，何处春江无月明！江流宛转绕芳甸，月照花林皆似霰。空里流霜不觉飞，汀上白沙看不见。江天一色无纤尘，皎皎空中孤月轮。江畔何人初见月？江月何年初照人？人生代代无穷已，江月年年望相似。不知江月待何人，但见长江送流水。白云一片去悠悠，青枫浦上不胜愁。谁家今夜扁舟子？何处相思明月楼？可怜楼上月徘徊，应照离人妆镜台。玉户帘中卷不去，捣衣砧上拂还来。此时相望不相闻，愿逐月华流照君。鸿雁长飞光不度，鱼龙潜跃水成文。
</p>
</div>
</body>
</html>
要实现图片中的效果，只要添加如下css：
#toc {
position: sticky;
top: 60px;
float: left;
margin-left: calc(50% - 50vw);
width: calc(50vw - 50%);
max-height: 80%;
}
这其中用到的知识有：
- 粘性定位
- 浮动
- 引入数学公式计算外边距与宽度
其中『50vw』指屏宽的50%，而『50%』指父元素的50%
但是，这样的样式仅适用于一般的电脑屏幕，对于更宽的高像素屏或更窄的移动端屏幕则力有未逮。为了自适应不同屏宽，最后我们可以使用媒体查询来做到面面俱到。
具体而言，我们可以把上面的代码改成这个样子：
@media (min-width: 1200px){
#toc{
position:sticky;
top:60px;
float:left;
margin-left:calc(50% - 50vw);
width:calc(50vw - 50%);
max-height:80%;
}
}
@media (min-width: 1600px){
#toc{
position:sticky;
top:60px;
float:left;
margin-left:-256px;
width:256px;
max-height:80%;
}
}
如此，最终我们得到了理想的效果。
浙公网安备 33010602011771号