原生JS监听页面滚动条（2）-实现类似CSDN、简书等等网站导航和主题内容的交互

需求：
上一篇完成了原生JS监听页面滚动距离并完成回到顶部（上一篇）
本章实现CSDN左侧导航和右侧主题区域的滚动交互，先开下图（暂时忽略最右方的导航，其实现原理和左边导航相同）：

图①：左侧作者信息等，右侧文章内容

图②：左侧站点导航，文章列表

话不多说，上代码：

HTML

<div class="content">
	<div class="container">
		<div class="c-left comma-left">/*左侧导航*/</div>
		<div class="c-main">/*主体内容*/</div>/*主体内容的class按照页面导航和主体内容的需求来定*/
	</div>
</div>

CSS

.content{
	width: 100%;
	height: 100%;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	overflow-y: auto;
}
.container{
	width: 1300px;
	height: 100%;
	padding: 10px 0;
}
.home-content .container .comma-left{
	position: absolute;
}
.home-content.minHeight .container .comma-left{
	top: 50px
}
.home-content.maxHeight .container .comma-left{
	bottom: 0;
}
/*图2*/
.home-content .container .自定义{
	margin-left: 110px;
}
/*图1*/
.home-content .container .自定义{
	margin-left: 310px;
}

JS

let contentScroll = document.querySelector('.content')
if(contentScroll){
	contentScroll.addEventListener('scroll',function(){
		console.log(this.offsetHeight)
		let commaLeft = document.querySelector('.comma-left');
		let container = document.querySelector('.container');
		let st = this.scrollTop;//content滚动距离
		if(commaLeft.offsetHeight<=this.offsetHeight){
//左侧导航高度小于等于content的总高度，即content向下滚时，导航始终顶部在上
			if( st> 200){
				this.classList.add('home-content','minHeight');
			}else{
				this.classList.remove('home-content','minHeight');
			}
		}else{
//左侧导航高度小于等于content的总高度，即content向下滚时，导航始终底部在下，这里的st>200防止主体内容高度较小时页面下拉闪烁
			if(st+this.offsetHeight>commaLeft.offsetHeight && st>200){
				this.classList.add('home-content','maxHeight');
			}else{
				this.classList.remove('home-content','maxHeight');
			}
		}
	})
}

以上即是原生JS监听页面滚动条时导航和主题内容的交互的全部代码，亲测可用。