移动端导航固定头部的fixed设置

来源：互联网发布：英国一年制硕士知乎编辑：程序博客网时间：2024/05/18 03:42

移动端导航固定头部的fixed设置

html部分：

<div class="poi-navigation"><ul class="list-inline" id="ul_navigation"><li class="active"><b>产品介绍</b></li><li><b>预定须知</b></li><li><b>用户点评</b></li></ul></div>

css部分：

.poi-navigation{margin-top: 10px;}.poi-navigation ul{height: 35px;    line-height: 35px;    text-align: -webkit-center;    background-color: white;    border-bottom: 1px solid #ccc;}.poi-navigation ul li{position: relative;width:30%;}.active:after{    position: absolute;    left:0;    bottom:0;content:"";    width: 100%;    height: 2px;background-color:#40c895; }.fixed_top{position:fixed;top:0;left: 0;    width: 100%;    margin-top: 0px;}

js部分

// 滚动监听window.onscroll = spotDetail.scrollEvent;/** * 滚动监听 */scrollEvent : function () {var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;var u1 = $('#menu1').offset().top;var u2 = $('#menu2').offset().top;var u3 = $('#menu3').offset().top;if(scrollTop >= u1){$('.poi-navigation').addClass('fixed_top');} else {$('.poi-navigation').removeClass('fixed_top');}if(scrollerFlag){if(scrollTop >= u1 && scrollTop < u2){$('#ul_navigation').find('li').removeClass('active'); $('#ul_navigation').find('li').eq(0).addClass('active');} else if(scrollTop >= u2 && scrollTop < u3){$('#ul_navigation').find('li').removeClass('active'); $('#ul_navigation').find('li').eq(1).addClass('active');} else if(scrollTop >= u3){ $('#ul_navigation').find('li').removeClass('active'); $('#ul_navigation').find('li').eq(2).addClass('active');}}},// tap切换$('#ul_navigation').on('click','li',function(){if(!$(this).hasClass('active')){var obj = $(this);$('#ul_navigation').find('li').removeClass('active');$(obj).addClass('active');var ind = $(obj).index();var totop = '';switch (ind) {case 0:totop = $('#menu1').offset().top;break;case 1:totop = $('#menu2').offset().top;break;case 2:totop = $('#menu3').offset().top;break;default:break;}scrollerFlag = false;$('html,body').animate({scrollTop:totop}, 300,function(){setTimeout(function(){scrollerFlag = true;}, 500);});}});

阅读全文

0 0