滚动触发某一个事件

先看看效果吧：

HTML

<div class="gx_bo_gu">
	<!--上图标-->
	<p class="gx_pi pi" onmousedown="moveTop()"><i class="layui-icon iis" style="display: none;">&#xe619;</i></p>
	<div class="gx_shi" id="gx_shisId">
		<ul>
			<li><img src="../img/test/级.jpg"><p>班</p></li>
			<li><img src="../img/Communication/1.jpg"><p>班</p></li>
			<li><img src="../img/test/级.jpg"><p>班</p></li>
			<li><img src="../img/test/级.jpg"><p>班</p></li>
			<li><img src="../img/test/级.jpg"><p>班</p></li>
			<li><img src="../img/test/级.jpg"><p>班</p></li>
			<li><img src="../img/test/级.jpg"><p>班</p></li>
			<li><img src="../img/test/级.jpg"><p>班</p></li>
		</ul>
	</div>
	<!--下图标-->
	<p class="gx_pi pis" style="margin-top: 5px;" onmousedown="moveBottom()"><i class="layui-icon is" >&#xe61a;</i></p>
</div>

CSS:

.gx_buf {
	height: 76px;
	width: 76px;
	position: absolute;
	z-index: 1;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	cursor: pointer;
}

.gx_buf img {
	cursor: pointer;
	transition: all 0.6s;
}

.gx_buf img:hover {
	transform: scale(1.1);
}

.gx_bo_fang {
	background-color: blanchedalmond;
	width: 100%;
	height: 302px;
	position: relative;
	overflow: hidden;
}

.gx_bo_fang img {
	width: 100%;
	height: 100%;
	transition: all 0.6s;
}

.gx_bo_fang img:hover {
	transform: scale(1.1);
}

.gx_bo_gu {
	background-color: rgba(39, 39, 39, 0.6);
	width: 126px;
	height: 285px;
	position: relative;
	float: right;
	top: -293px;
	border-radius: 3px;
	right: 11px;
	margin: 0 auto;
}

.gx_pi {
	position: absolute;
	width: 100%;
	text-align: center;
}

.pi {
	animation: shaking 0.60s linear infinite;
}
.pis{
	animation: shakings 0.60s linear infinite;
}
.gx_pi i {
	color: #FFFFFF;
	font-size: 20px;
	margin: 0 auto;
	cursor: pointer;
}

.gx_shi {
	width: 89px;
	height: 229px;
	margin: 0 auto;
	overflow-x: hidden;
	overflow-y: scroll;
	margin-top: 22px;
}

.gx_shi::-webkit-scrollbar {
	display: none;
}

.gx_shi ul li {
	width: 89px;
	height: 44px;
	background-color: antiquewhite;
	margin-top: 13px;
}
.gx_shi ul li p{
	font-size: 9px;
	text-align: center;
	position: relative;
	top: -10px;
	background-color: rgba(39, 39, 39, 0.6);
	color: #FFFFFF;
}
.gx_shi ul li img{
	width: 100%;
    height: 100%;

}

JS:

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
//滚动条
$(document).ready(function(){
	var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度) 滚动div的高度
 	var nScrollTop = 0; //滚动到的当前位置
 	var nDivHight = $("#gx_shisId").height();//	滚动div
 	$("#gx_shisId").scroll(function() {
 		nScrollHight = $(this)[0].scrollHeight;
 		nScrollTop = $(this)[0].scrollTop; //滚动到的当前位置
 		
 		if(nScrollTop == 0) {
//						alert("滚到头部了");
 			$(".iis").attr("style","display: none;")
//						console.log(nScrollTop + "   " + nDivHight + "   " + nScrollHight);
 		}
 		if(nScrollTop) {
 			$(".iis").attr("style","display: block;")
 			$(".is").attr("style","display: block;")
//						alert("中部了");
//						console.log(nScrollTop + "   " + nDivHight + "   " + nScrollHight);
 		}
 		if(nScrollTop + nDivHight >= nScrollHight) {
//						alert("滚动条到底部了");
 			$(".is").attr("style","display: none;")
//						console.log(nScrollTop + "   " + nDivHight + "   " + nScrollHight);
 		}

 	});
				
})