侧边栏跟随滑动即将离开视窗时固定在侧边的效果

有时候网页主体内容居中，分左右两个模块，左边为侧边栏，右边为主要内容。侧边栏的长度有限（小于视窗高度），固定为一定的高度，主要内容过多时就会导致侧边空旷，看起来不太美观，所以在网页滑动到视窗失去侧边栏的时候再把侧边内容固定在视窗的侧边是一种比较好的处理方法。
本文所写的方法相对来说比较简单，具体思路如下：

<div class="container">
	<div id="fixed" class="menu"></div>
	<div class="content"></div>
</div>

侧边栏固定宽度，主体内容占一定宽度比

.container{
	display: flex;
	width: 1440px;
}
.menu{
	width: 340px;
	margin-right: 24px;
}
.fixed{
	/* sticky 是根据正常文档流进行定位的 */
	position: sticky;
	top: 30px;
	left: 0;
}
.content{
	width: 70%;
}

监测网页的滚动事件，当页面的的 scrollTop 大于 menu 的高度时，更改 menu 的样式

(function () {
	var target = document.getElementById("fixed")
	var t_height = target.clientHeight
	window.onscroll = function () {
		var overHeight = document.body.scrollTop || document.documentElement.scrollTop
		overHeight > t_height ? target.className = "fixed" : target.className = "menu"
	};
})();