js之当菜单随着屏幕的滚动达到一定高度位置固定 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			p{
				height: 80px;
				background: #00ADEF;
				margin-bottom: 10px;
			}
			#bg{
				width: 100%;
				font-size: 40px;
				color: #fff;
				text-align: center;
				line-height: 80px;
				background: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var p = document.getElementById('bg');
				//需要固定的元素距离顶部的距离
				var pTop = p.offsetTop
				window.onscroll = function(){
					//获取被卷去高度
					var sT = document.documentElement.scrollTop || document.body.scrollsToTop;
					 console.log(sT,pTop)
					if(sT>pTop){
						p.style.position = 'fixed';
						p.style.top = '0';
						p.style.zIndex = '999';
						p.innerText = '哈哈，我被定住了啦！'
					}else{
						p.style.position = 'static';
						p.innerText = '';
					}
				}
				
			}
		</script>
	</head>
	<body>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p id="bg"></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
	</body>
</html>

 

posted @ 2023-04-14 00:21  JackieDYH  阅读(4)  评论(0)  编辑  收藏  举报  来源