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

最新推荐文章于 2024-07-19 20:49:20 发布

Sher_H

最新推荐文章于 2024-07-19 20:49:20 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/Sher_H/article/details/87904185

版权

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

摘要由CSDN通过智能技术生成

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