JS--滚动条滚动事件，拖动滚动条导航栏固定到页面顶部

div{
	width: 300px;
	height: 200px;
	overflow: auto;
}

<div id="dv">
	战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒
</div>
<input type="button" value="显示效果" id="btn" />
<script>
function my$(id){
	return document.getElementById(id);
}
//div的滚动事件
my$("dv").onscroll = function(){
	console.log(this.scrollTop);
}
</script>

导航栏固定

div{
	width: 100%;
}
#hand{
	height: 40px;
	background-color: goldenrod;
}
#nav{
	height: 50px;
	background-color: hotpink;
}
#nr{
	height: 1000px;
	border: 1px solid red;
	margin-top: 10px;
}
.fixed{
	position: fixed;
	top: 0;
}

<div id="hand">头</div>
<div id="nav">导航栏</div>
<div id="nr"></div>
<script>
function my$(id){
	return document.getElementById(id);
}

//封装getScroll函数,浏览器向上卷曲距离的值，向左卷曲的距离
function getScroll(){
	return {
		top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
		left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
	}
}

//页面的滚动事件
window.onscroll = function(){
	if(getScroll().top >= my$("hand").offsetHeight){
		my$("nav").className = "fixed";
		my$("nr").style.marginTop = my$("nav").offsetHeight + 10 + "px";
	}else{
		my$("nav").removeAttribute("class");
		my$("nr").style.marginTop = "10px";
	}
}
</script>