vue jquery lodash实现滑动时顶部悬浮固定效果

本文实例为大家分享了某视频剪辑软件实现滑动时顶部悬浮固定效果的具体代码，供大家参考，具体内容如下

这个效果是一个项目中抽出来的一个演示效果。

前期准备：

1.引入日本季刊日本季刊

脚本src=' http :https://cdn。bootcss。com/jquery/3。2 .1/jquery。js /脚本引入lodash.js

新公共管理安装lodash -DfixTop.vue组件的

模板div class=' fix top 2 ' header class=' header ' ref=' header '/header div class=' nav ' ref=' nav ' : class=' { is fixed : is fixed } ' div class=' box ' v-for='列表：key='索引{ item。title } }/div/div ul class=' content ' Li v-for='(item，index)' new Array(20)' : key='//从洛达什中引入的喉咙节流函数导出默认值{ name: ' navScroll2 '，data(){ return { list :[{ title : ' AAAA '，id: 1 }，{ title: 'BBBB '，id: 2 }，{ title: 'CCCC '，id: 3 }，{ title: 'DDDD '，id: 4 }，}，isFixed: false，//是否固定的throttleScroll: null，//定义一个截流函数的变量};}，methods: { //滚动的函数handleScroll() { let h=$(this .$refs.header).outhealth()；//标题的高度让wh=$(窗口)。滚动顶部()；//滚动的距离的，为什么这里使用的jq，因为不用考虑的什么的兼容问题让navH=$(这个$refs.nav).outhealth()；//导航的高度如果这个。IsFixed=true} else { this.isFixed=false} }，}，挂载(){ //写在掉接口的里面的这个$nextTick(()={ //这里使用监听的卷起的事件，为什么要使用的节流函数，如果不使用的，页面一直在滚动计算的，这样在//使用手机时候，出现非常卡的，隔一段时间计算，大大降低了性能的消耗（具体的好处自己去查资料)窗口。addeventlistener(' scroll '，this.throttleScroll，false)；});这个。油门滚动=油门(这个。handlescroll，100)；},停用(){ //离开页面需要移动这个监听器，不然还是卡到爆窗户。removeeventlistener(' scroll '，这。throterscroll)；},};/script style lang=' SCS '作用域。fixtop 2 {最小高度： 100 VH}.表头{ height: 5rem宽度： 100%;背景-颜色：红色；}.nav { display: flex宽度： 100%;背景-颜色：粉色；isFixed { position : fixed left : 0；top : 0；z指数： 9999；} .box { font-size : 0.3 rempadding: 0 0.3rem高度： 0.9雷姆；线高： 0.9雷姆；color : # 333333 flex : 1；}}.内容{高： 20remLi {宽： 100%；高度： 1磅-底部： 1磅实心# 000;} }/样式以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。