前军教程网

默认效果：

展开效果：

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

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 Code
function 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'
    });
})