默认效果：

展开效果：

废话不多说，直接上代码：

Html Code：<div class=" header" id="eventDetailNavMain"><a href="javascript:void(0)" class="fl h-logo" title="logo">LOGO</a><!-- 按钮 --><a href="javascript:;" class="fr h-nu-btn" id="hNuBtn">  <span class="h-nu-default-icon">    </span> //-->h-nu-default-icon 放默认图标    //-->h-nu-close-icon 放关闭X 图标    <i class="common-icon h-nu-close-icon"></i></a>				<div class="h-nu-box">  //这里还可以放登陆-退出等div的box，布局要做好扩展  <div class="h-nav-box">//h-nav-box 这个是导航box    <ul class="nav nav-tabs clearfix ">      <li class="item itemli">        <a href="/" class="anchoritem">首页</a></li><li class="item itemli active">  <a href="#dsinfo" class="anchoritem">大赛简介</a></li><li class="item itemli">  <a href="#zzjg" class="anchoritem">组织机构</a></li><li class="item itemli">  <a href="#scplan" class="anchoritem">赛程安排</a></li><li class="item itemli">  <a href="#jxset" class="anchoritem">奖项设置</a></li><li class="item itemli">  <a href="#works" class="anchoritem">参赛作品要求</a></li><li class="item itemli">  <a href="#dspw" class="anchoritem">评审委员会</a></li><li class="item itemli">  <a href="javascript:;" class="anchoritem applicjob">实习招聘</a></li></ul>//这里可以是 其他box，这里放的是一个a标签<a href="/" class="apply-link" target="_blank">  报名入口</a></div></div></div>//hNuMask 是背景遮罩曾，可以全局的 <a href="javascript:;" class="c-mask" id="cMask"></a>注意：⚠️锚点定位栏目结构：-->赛程安排 id="scplan"<div class="resume-contitle">  <div class="title-mod" id="scplan"></div>	<h2 class="title-text">赛程安排</h2></div><style>//锚点准确跳转的关键样式  .title-mod {      position: absolute;      left: 0;      top: -60px;      width: 100%;      height: 60px;      z-index: -1;  }</style>

Css Code//-->遮罩的样式.cMask {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    background: rgba(0,0,0,.8);    z-index: 15;    display: none; }.cMask.show {    display: block;}.header {    background: #060634;    display: none;    border: 1px solid #352CC5;    box-shadow: 0 6px 10px 0 rgba(0,0,0,0.10);    height: 46px;    line-height: 46px;    font-size: 12px;    color: #FFFFFF;    position: fixed;    top: 0;    left: 0;    right: 0;    bottom: 0;    z-index: 20;}//按钮.h-nu-btn {    width: 46px;    height: 46px;    position: relative; //如果logo文字太长，把图标挤下来了，可以考虑fixed    top: 0;    right: 0;}.header .h-nu-default-icon {    width: 46px;    height: 46px;    display: block;    background: #352CC5 url(../img/default_icon.png) center;    background-repeat: no-repeat;}.header .h-nu-close-icon {    width: 46px;    height: 46px;    display: none; //默认是隐藏的    background: #352CC5 url(../img/close.png) center no-repeat;    top: 0px;    position: absolute;}//header 点击的时候，新增active的时候，关闭图标显示。.header.active .h-nu-close-icon {    display: block;}//header 点击的时候，新增active的时候，ul所在box显示。.header.active .h-nu-box {    display: block;}-->ul.nav样式 太普遍了，就...省略了..ofh {    overflow: hidden;}

Js Codefunction activeSideBarFixed() { //滚动吸顶  var $activeSideBar = $('.nav-resumewrap');//要吸顶的ul  var navTop = 0;  if ($activeSideBar[0]) {    navTop = $activeSideBar.offset().top;  }  $(window).scroll(function() {    var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;    if (scrolltop > navTop) {      sideTop = scrolltop - navTop;      $activeSideBar.addClass('fixed');      //添加fixed样式即：.nav-resumewrap.fixed{...}    } else {      $activeSideBar.removeClass('fixed');    }  });};//toast 方法function ajax_handle_message(msg){//操作信息提示方法    var $handleMessagePop = $('#handleMessagePop');    $handleMessagePop.text(msg).addClass('show');    setTimeout(function(){        $handleMessagePop.removeClass('show').empty();    },1000);};function hNuToggle() {    var $hNuBtn = $('#hNuBtn'),        $hNuMask = $('#cMask'),//全局遮罩元素        $html = $('html'),        winHeight = $(window).height() + 'px',        isOfh = false;   //-->图标点击执行事件    $hNuBtn.off('click').on('click', function() {        var $t = $(this);        $t.parent().toggleClass('active');        $hNuMask.toggleClass('show');        $html.toggleClass('ofh');        isOfh = $html.hasClass('ofh');        if (isOfh) {            $html.css('height', winHeight);        }    });  //-->遮罩点击执行事件    $hNuMask.off('click').on('click', function() {        var $t = $(this);        $t.removeClass('show');        $hNuBtn.parent().removeClass('active');    });   //点击子元素，关闭header的选中active效果    $('.h-nu-box .itemli').off('click').on('click', function() {        $hNuBtn.parent().removeClass('active');    });       $('.applicjob').off('click').on('click', function() {        ajax_handle_message('敬请期待');    });};$(function() {    activeSideBarFixed();    hNuToggle();     //锚点定位栏目，用的是bootstrapjs的功能，target对应ul的包围box即可    $('body').scrollspy({        target: '#eventDetailNavMain'    });})