样式自己写
效果: 固定导航(this_.nailFlag为true)----- 滑动页面导航定位在最顶部
不固定的导航 (this_.nailFlag为false) ----- 页面划走导航消失 鼠标移到顶部导航出现
两种导航可以自由切换
//滚轮事件
scroll(){
var this_ = this;
var banOffTop=$(".commonHeader").offset().top;//获取到距离顶部的垂直距离
var scTop=0;//初始化垂直滚动的距离
$(document).scroll(function(){
scTop=$(this).scrollTop();//获取到滚动条拉动的距离
//console.log(scTop);查看滚动时,垂直方向上,滚动条滚动的距离 【this_.nailFlag定导航的开关】
if(this_.nailFlag){
if(scTop>banOffTop){
//当滚动条拉动的距离大于等于导航栏距离顶部的距离时,添加指定的样式
$(".commonHeader").addClass("headernailback");
}else{
$(".commonHeader").removeClass("headernailback");
}
}else{
if(scTop>banOffTop){
//当滚动条拉动的距离大于等于导航栏距离顶部的距离时,添加指定的样式
$(".commonHeader").addClass("nonail");
}else{
$(".commonHeader").removeClass("nonail");
}
}
})
},
//鼠标事件
showHeader(){
var this_ = this;
var banOffTop=$(".commonHeader").offset().top;//获取到距离顶部的垂直距离
// * 移动时
document.onmousemove = function(ev){
var oEvent = ev || event;
var scTop=$(this).scrollTop();//获取到滚动条拉动的距离
if(!this_.nailFlag){
if(oEvent.clientY <= 20 && scTop > banOffTop){
$(".commonHeader").addClass("hover headernailback");
}else{
//---------------这里需要再次判断 因为导航有下拉框 如果不再判断就没办法选中(自行体会)------------------
if(oEvent.screenY >= 300){
$(".commonHeader").removeClass("hover headernailback");
}
}
}
}
},
网友评论