Web前端：常用组件2.置顶菜单

最新推荐文章于 2025-06-13 13:13:09 发布

Sher_H

最新推荐文章于 2025-06-13 13:13:09 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： Web前端

本文链接：https://blog.youkuaiyun.com/Sher_H/article/details/87904185

Web前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了Web前端中置顶菜单的实现方法。当用户滚动页面时，菜单栏会在到达顶部时固定，以便用户方便点击。文章讨论了在实现过程中可能遇到的问题，如菜单栏脱离文档流导致的布局问题，并提出了解决方案，即通过设置一个辅助元素来避免内容消失。

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

2.置顶菜单

（1）移动前：
在这里插入图片描述
移动后：

（2）实现效果：用户拉动滚动条时，当菜单栏移动到顶部时不再移动，便于用户点击

（3）代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		body{
			margin:0;
		}

		.banner{
			width:960px;
			height:200px;
			background-color:cyan;
			margin:0 auto;
		}

		.menu{
			width:960px;
			height:80px;
			background-color:gold;
			margin:0 auto;
			text-align:center;
			line-height:80px;
		}

		.menu_back{
			width:960px;
			height:80px;
			margin:0 auto;
			display:none;
		}

		p{
			text-align:center;
			color:red;
		}

	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$menu = $('.menu');
			$menu_back = $('.menu_back');
			$totop = $('.totop');

			$(window).scroll(function(){
				//console.log('abc');

				// 获取滚动条滚动的高度
				var iNum = $(document).scrollTop();
				//document.title = iNum;

				// 当滚动的高度大于菜单所在的高度，改变菜单的position
				if(iNum>200)
				{
					$menu.css({
						'position':'fixed',
						'left':'50%',
						'top':0,
						'marginLeft':-480
					});

					$menu_back.show();
				}
				// 当小于使，则修改为static
				else
				{
					$menu.css({
						'position':'static',						
						'marginLeft':'auto'
					});

					// 
					$menu_back.hide();
				}

			})
		
		})
	</script>
</head>
<body>
	<div class="banner"></div>
	<div class="menu">菜单</div>
	<div class="menu_back"></div>
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
</body>
</html>

（4）注意：当将菜单栏的position属性修改为fixed时，菜单栏会脱离文档流，导致菜单栏下面的文档流补充脱离后的空缺
即表现为当滚动条达到菜单所在位置那一瞬间，菜单固定在顶部，而原本位于菜单下的文本会消失的现象
要解决这个问题，可以多设置一个div位于菜单栏div下面，设置为display：none，然后通过var iNum = $(document).scrollTop()判断滚动条的高度超过一定程度就show（）显示或hide（）隐藏