vue+jquery+lodash实现的滑动时顶部悬浮固定

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

前期准备&＃xff1a;
1. 引入jQ

<script src&＃61;"https://cdn.bootcss.com/jquery/3.2.1/jquery.js">script>

1. 引入lodash.js

npm install lodash -D

fixTop.vue组件的

<template><div class&＃61;"fixtop2"><header class&＃61;"header" ref&＃61;"header">header><div class&＃61;"nav" ref&＃61;"nav" :class&＃61;"{isFixed:isFixed}"><div class&＃61;"box" v-for&＃61;"(item,index) in list" :key&＃61;"index">{{item.title}}div>div><ul class&＃61;"content"><li v-for&＃61;"(item,index) in new Array(20)" :key&＃61;"index">{{index&＃43;1}}li>ul>div>
template>
<script>
var throttle &＃61; require(&＃39;lodash/throttle&＃39;); //从lodash中引入的throttle节流函数
export default {name: &＃39;navScroll2&＃39;,data() {return {list: [{ title: &＃39;AAAA&＃39;, id: 1 },{ title: &＃39;BBBB&＃39;, id: 2 },{ title: &＃39;CCCC&＃39;, id: 3 },{ title: &＃39;DDDD&＃39;, id: 4 },],isFixed: false, //是否固定的throttleScroll: null, //定义一个截流函数的变量};},methods: {//滚动的函数handleScroll() {let h &＃61; $(this.$refs.header).outerHeight(); //header的高度let wh &＃61; $(window).scrollTop(); //滚动的距离的&＃xff0c;为什么这里使用的jq&＃xff0c;因为不用考虑的什么的兼容问题let navH &＃61; $(this.$refs.nav).outerHeight(); //nav的高度if (wh > h) {this.isFixed &＃61; true;} else {this.isFixed &＃61; false;}},},mounted() {//写在掉接口的里面的this.$nextTick(() &＃61;> {//这里使用监听的scroll的事件&＃xff0c;为什么要使用的节流函数&＃xff0c;如果不使用的&＃xff0c;页面一直在滚动计算的&＃xff0c;这样在//使用手机时候&＃xff0c;出现非常卡的&＃xff0c;隔一段时间计算&＃xff0c;大大降低了性能的消耗&＃xff08;具体的好处自己去查资料&＃xff09;window.addEventListener(&＃39;scroll&＃39;, this.throttleScroll, false);});this.throttleScroll &＃61; throttle(this.handleScroll, 100);},deactivated() {//离开页面需要remove这个监听器&＃xff0c;不然还是卡到爆。window.removeEventListener(&＃39;scroll&＃39;, this.throttleScroll);},
};
script>
<style lang&＃61;"scss" scoped>
.fixtop2 {min-height: 100vh;
}.header {height: 5rem;width: 100%;background-color: red;
}.nav {display: flex;width: 100%;background-color: pink;&.isFixed { position: fixed;left: 0;top: 0;z-index: 9999;}.box {font-size: 0.3rem;padding: 0 0.3rem;height: 0.9rem;line-height: 0.9rem;color: #333333;flex: 1;}
}.content {height: 20rem;li { width: 100%;height: 1rem;border-bottom: 1px solid #000;}
}
style>