网站的头部份（header）包括一个部分导航栏；现在的需求是当页面往下拉时，导航菜单固定，而且处于浏览器的最上面。那么我们现在就来实现它：
1.header标签
在HTML5版本之前习惯使用div标签布局网页，在HTML5在div标签基础上新增header标签元素。也叫“<header>”头部标签。以前我们在div css布局中常常把网页大致分为头部、内容、底部。对于大结构我们常常使用div里加class或id进行布局。而头部常常使用<div class=”header”></div>或<div id=”header”></div>进行布局，特点与传统div 布局不同，少了div做标签，而是新增元素标签。
<body> <header class="header_area"> <!-- 网页的头部份HTML代码 --> </header> </body>
2.container类
bootstrap的 .container 类是非常有用的，它能在页面中创建一个居中的区域，然后我们能够把其他位置的内容放到里面。container类等价于创建了一个具有静态宽度并且magin值为auto的一个居中的div框。 bootstrap的 container类的优点在于它是响应式的，是bootstrap的外围容器，栅格化布局的基础。
container有个15px的padding，而我们设定的每个col也都有15px的padding，如果两者直接配合，那么就会产生30px的间距，导致内容和浏览器边框的距离较大，所以用row将所有的col包裹，row会有一个-15px的margin，可以抵消掉一个container或col产生的15px的padding值。
<header class="header"> <div class="container"> <div class="col-lg-2">***</div> <div class="col-lg-10">***</div> </div> </header>
3.当页面往下拉时，将导航栏固定在浏览器的最上方
定义一个sticky类，当页面往下滚动小于100px就移除header标签的.sticky，如果大于100就为header添加.sticky。
/* css部分 */
.sticky { position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 337; box-shadow: 2.5px 4.33px 15px 0px rgba(0, 0, 0, 0.15); }
/* js实现sticky动态添加取消 */
$(window).on('scroll',function() { var scroll = $(window).scrollTop(); if (scroll < 100) { $(".header_area").removeClass("sticky"); }else{ $(".header_area").addClass("sticky"); } });
4.鼠标悬停显示二级菜单
实现这个功能主要是两个东西：①:hover 选择器 当鼠标悬停在指定元素上时的样式； ②visibility 属性 当属性值为visible时元素是可见的，当属性值为hidden时元素是不可见的；
<nav class="main_menu"> <ul> <li class="menu-item"><a href="#">网站首页</a></li> <li class="menu-item"><a href="#">新闻聚焦</a></li> <li class="menu-item"><a href="#">通知公告</a></li> <li class="menu-item"><a href="#">防控指南</a></li> <li class="menu-item"><a href="#">咨询平台</a> <ul class="sub-menu"> <li class="menu-item"><a href="#">专家解读</a></li> <li class="menu-item"><a href="#">我要提问</a></li> </ul> </li> <li class="menu-item"><a href="#">辟谣专栏</a></li> <li class="menu-item"><a href="#" class="deneb_btn">我要提问</a></li> </ul> </nav>
/* 当鼠标悬停到小li上时显示类名为sub-menu的二级菜单 */ .header_area .site_menu .primary_menu .main_menu ul li:hover ul.sub-menu { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); visibility: visible; opacity: 1; /* 不透明 */ box-shadow: 2.5px 4.33px 15px 0px rgba(0, 0, 0, 0.15); } .header_area .site_menu .primary_menu .main_menu ul li ul.sub-menu li:hover ul.sub-menu { visibility: visible; opacity: 1; } /* 鼠标移动到二级菜单的小li上时更改字体颜色 */ .header_area .site_menu .primary_menu .main_menu ul li ul.sub-menu li:hover a { color: #7d52cc; }
5.项目燃尽图
