今天还是在敲代码的一天
但是今天的收获还是挺大的，把这个玩意搞定了
（ 主体的代码是按照参考书上的代码敲出来的 有一些自我加工 ）
先看看效果图（ 主要看导航栏 ）
说一下我的思路，我的想法就是 将 body 的 scrollTop 作为 data 里面的一个属性 然后 watch 来监听数据的变化
注意 这个方法在某种程度上是 “ 脱裤子放屁 ” 做了一些无用功 但是我就是想用一下 watch
贴一下 这部分的源码
1 export default { 2 name: "App", 3 data() { 4 return { 5 scroll: 0, 6 }; 7 }, 8 mounted() { 9 window.addEventListener("scroll", this.getScroll); 10 }, 11 watch: { 12 scroll: { 13 handler: "showTop", 14 }, 15 }, 16 methods: { 17 toggleLogo() { 18 this.$router.push("/"); 19 }, 20 showTop(newValue, oldValue) { 21 let header = document.getElementsByClassName("header")[0]; 22 23 if (newValue > 0) { 24 header.classList.add("header-active"); 25 } else { 26 header.classList.remove("header-active"); 27 } 28 console.log(oldValue, newValue); 29 }, 30 getScroll() { 31 this.scroll = 32 document.documentElement.scrollTop || document.body.scrollTop; 33 }, 34 }, 35 }; 36 </script>
因为本来就进行了 对 scroll 的监听 但是我又加了 watch 所以有点重复了
注意 上面的东西是原生的 js 写的，所以有些笨重，完全可以用 jQuery 来的 但是我有点懒 不想找
CSS 代码 这个应该通俗易懂
注意事项
其实对于组件到处引用的 Vue 来说，这个还好办一点，就是上述操作之后还得动一下脑筋，不然这个变化过程会很不流畅
原因是 当大于 0 的时候，这个导航栏就相当于浮空了，把以前下面的组件给顶了上去，这一动作是立马完成的 就很突兀
解决方法就是把 下面的组件上面再弄个 margin-top 或者是再弄个等高的盒子 就好了
（ 可能还需要微调一下 position 、top：0 什么的 )
简单粗糙示意图
总结
写了一个下午了，想玩了
明天继续肝
·
原文：https://www.cnblogs.com/WaterMealone/p/14383179.html