滑动滚动条固定一个div到顶部

最新推荐文章于 2025-01-23 16:52:16 发布

XiaoXiongV

最新推荐文章于 2025-01-23 16:52:16 发布

阅读量1.8k

点赞数 1

分类专栏： js

js 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了一种使用JavaScript监听滚动条事件并固定特定div元素到页面顶部的方法。通过计算目标元素的位置和滚动条的距离，实现了div元素的动态定位。此技术常用于导航栏的固定显示，增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="js/com.js"></script>
	<link rel="stylesheet" href="css/com.css" />
	<script type="text/javascript" src="js/index.js"></script>
	<link rel="stylesheet" href="css/index.css" />
	<style>
		.head img{
			height: 100px;
			width: 100%;
			background-color: red;
		}
		
		.target img{
			margin:0;
			height: 50px;
			width: 100%;
			background-color: gray;
		}
		
		.foot img{
			height: 3000px;
			width: 100%;
			background-color: aquamarine;
		}
	</style>
</head>

<body>
	<div class="head" id="head">
		<img src="img/2.jpg" />
	</div>
	<div class="target" id="target">
		<img src="img/3.jpg" />
	</div>
	<div class="foot" id="foot">
		<img src="img/3.jpg" />
	</div>
	<script>
		/**
		 * 滑动滚动条固定一个div到顶部
		 */
		//获取head  的height
		var headleft = my$("head").offsetHeight;
		//获取target
		var targetleft = my$("target").offsetTop
			//获取滚动条移动距离

		window.onscroll = function() {
			var gdTop = getScroll().top;
			console.log(gdTop);
			if(gdTop > headleft) {
				console.log("2");
				my$("target").style.position = "fixed";
				my$("target").style.top = 0 + "px";
			} else {
				my$("target").style.position="";
				my$("target").style.marginTop=0+"px";
			}
		}
	</script>
	<script>
				/**
		 * 获取浏览器的滚动值
		 */
		function getScroll() {
			return {
				left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
				top: window.pageXOffset || document.documentElement.scrollTop || document.body.scrollLeft || 0
			};
		}
	</script>
</body>

</html>