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

本文介绍了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()隐藏

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值