默认效果:
展开效果:
废话不多说,直接上代码:
Html Code:
//hNuMask 是背景遮罩曾,可以全局的 注意:⚠️锚点定位栏目结构:-->赛程安排 id="scplan"
赛程安排
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' });})