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

移动端导航固定头部的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);
});
}

});