非重点的代码,比如样式啥的,我就不放上来了,一笔带过
简略的写一下html代码,可以对照文章最后的效果图看,应该不难理解
& lt; div:比;
& lt; header>资源信息& lt;/header>
& lt; div>
& lt; !——公司信息浏览量——比;
& lt;/div>
& lt; div id=癴ixedBar”: class=" {fixedBar:用}”在
& lt; !——品名——比;
& lt; !——规格——比;
& lt; !——产地——比;
& lt; !——单价——比;
& lt;/div>
& lt; div:比;
& lt; !——数据列表——比;
& lt;/div>
& lt;页脚类=耙辰拧北?
& lt; button>订阅& lt;/button>
& lt; button>关闭& lt;/button>
& lt; div v-show=癮dvertShow”比;
& lt; @click=皑尅弊４恰? lt;/a>
& lt; img src=" https://www.yisu.com/zixun/广告jpg”/比;
& lt;/div>
& lt;/footer>
& lt;/div>
& lt; style>
.fixedBar {
位置:固定;
上图:0;
z - index: 999;
宽度:100%;
}
& lt;/style>
之前
数据(){
paddingBottom: 1.5雷姆,//给最外层div一个padding-bottom//因为页脚是固定的定位如果padding-bottom为0的数据列表拉到最下面的时候会有部分数据被页脚挡住
用:假的,//条形浮动
offsetTop: 0,//触发杆浮动的阈值
marginTop: 0,//触发杆浮动的同时给数据列表一个margin-top防止列表突然上移会很突兀
advertShow:真的,//广告显示
}
之前
安装(){//设置初始的padding-bottom值为页脚的高度+ 20防止数据列表拉到最下面被页脚挡住+多少自定
这一点。paddingBottom=document.querySelector (“.footer”)。offsetHeight + 20 +“px”;//设置杆浮动阈值为# fixedBar至页面顶部的距离
这一点。offsetTop=document.querySelector .offsetTop (“# fixedBar”);//开启滚动监听
窗口。addEventListener(“滚动”,this.handleScroll);
}
之前
方法:{//关闭广告
德尔(){
这一点。advertShow=true;
美元。nextTick(()=比;{
这一点。paddingBottom=document.querySelector (“.footer”)。offsetHeight + 20 +“px”;
});
},//滚动监听滚动触发的效果写在这里
handleScroll () {
var scrollTop=窗口。pageYOffset | | document.documentElement。scrollTop | | document.body.scrollTop;
如果(scrollTop祝辞=this.offsetTop) {
这一点。用=true;
这一点。marginTop=document.querySelector (“# fixedBar”)。offsetHeight +“px”;
其他}{
这一点。用=false;
这一点。marginTop=0;
}
}
}
之前
摧毁了(){
窗口。removeEventListener(“滚动”,this.handleScroll);//离开页面关闭监听不然会报的错
}
以上这篇VUE实现滚动监听导航栏置顶的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
