超文本标记语言

非重点的代码，比如样式啥的，我就不放上来了，一笔带过

简略的写一下超文本标记语言代码，可以对照文章最后的效果图看，应该不难理解

div :样式=“{填充底部：填充底部}”标头资源信息/header div！-公司信息浏览量-/div div id='固定背面' : class=' {固定背面：是固定的} '！-品名- !-规格- !-产地- !-单价-/div div : style=' { marginto p : marginto p } '！-数据列表- /div页脚类="页脚"按钮订阅/按钮按钮关闭/button div-SHow=' Address SHow ' a @ click=' del '/a img src=' http :/广告jpg '/div/页脚/divstyle .固定反馈{位置：固定；top : 0；z指数： 999；宽度： 100%;}/styleVUE

1.数据()

data(){填充底部： ' 1.5 rem '，//给最外层差异一个填充-底部/因为页脚是确定的定位如果填充底部为0 数据列表拉到最下面的时候会有部分数据被页脚挡住isFixed: false，//bar浮动offsetTop: 0，//触发酒吧浮动的阈值边距p: 0，//触发酒吧浮动的同时给数据列表一个上边距防止列表突然上移会很突兀广告显示：为真，//广告显示}2.已安装()

挂载(){ //设置初始的填充底部值为页脚的高度20 防止数据列表拉到最下面被页脚挡住多少自定这个。底部填充=文档。查询选择器(' .页脚')。偏右20 ' px//设置酒吧浮动阈值为#修复反馈至页面顶部的距离这个。offsettop=文档。queryselector(' # fixeback ').offsetTop//开启滚动监听窗户。addeventlistener(' scroll '，这。handlescroll)；}3.方法

methods: { //关闭广告del(){这个。ADdress SHow=true这个$ next tick(()={ this。底部填充=文档。queryselector(' .页脚')。偏右20 ' px })；}, //滚动监听滚动触发的效果写在这里handleScroll(){ var scroll top=window。pageyoffset | |文档。文档元素。向上滚动| |文档。尸体。滚动顶部；if(滚动顶部=这个。offsettop){这个。isfixed=true这个。上边距=文档。queryselector(' #固定back ').偏右px '；} else { this.isFixed=falsethis。margin top=0；} }}4.已销毁()

销毁(){ window。removeeventlistener(' scroll '，这。handlescroll)；//离开页面关闭监听不然会报错}效果图

以上这篇VUE实现滚动监听导航栏置顶的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。