预防新型冠状病毒科普宣传网站之header导航栏（2020年7月22日）

网站的头部份（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; 
}