#JS简易吸顶条步骤方法#

最新推荐文章于 2022-11-03 16:13:03 发布

原创最新推荐文章于 2022-11-03 16:13:03 发布 · 271 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js简易吸顶条

本文详细介绍使用HTML、CSS及JavaScript实现网页元素吸顶效果的步骤。通过设置元素定位及监听滚动事件，使指定div在页面滚动时固定显示在顶部。

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

#制作JS简易吸顶条的步骤：#

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>固定滑动悬浮</title>
</head>
<style type="text/css">
	*{											/*设置CSS样式*/

		margin: 0;
		padding: 0;
	}
	.p{
		width: 100%;
		height: 400px;
		text-align: center;
		line-height: 35px;
		background: pink;
	}
	#div{
		width: 100%;
		height: 50px;
		background: #009494;
		text-align: center;
		line-height: 50px;
		top: 0px;
		left: 0px;
	}
</style>
<body style="height: 3000px;">			// 给body一个高把他撑开


	<div class="p">
		忍不住化身一条固执的鱼<br>
        忍不住化身一条固执的鱼<br>
        忍不住化身一条固执的鱼<br>
        忍不住化身一条固执的鱼<br>
        忍不住化身一条固执的鱼<br>
        忍不住化身一条固执的鱼<br>
        忍不住化身一条固执的鱼<br>
        忍不住化身一条固执的鱼<br>
        忍不住化身一条固执的鱼<br>
        忍不住化身一条固执的鱼<br>
        忍不住化身一条固执的鱼
    </div>
	
	<div id="div">逆着洋流独自游到底</div><br>
	

</body>
<script type="text/javascript">
	
	var da = div.offsetTop;				//offsetTop返回当前元素距上边界的距离
	window.function(){   		//当文档被滚动时发生的事件
	var dada = document.documentElement.scrollTop || document.body.scrollTop;  //返回元素的滚动条的垂直位置
		if (dada>=da) {
			div.style.position="fixed";	 	//如果大于等于那么就固定定位
			div.style.display = "block";
		}else{
			div.style.position="";			//否则空的不定位
			div.style.display ="none";		//并且隐藏
		}
	}

</script>
</html>

```