Vue实现导航栏吸顶效果
生活随笔
收集整理的這篇文章主要介紹了
Vue实现导航栏吸顶效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Vue實(shí)現(xiàn)導(dǎo)航欄吸頂效果</title></head><body><script src="static/js/vue.js"></script><style>body {margin: 0;}/* 背景 */#app {height: 2000px;margin: 0 auto;background-color: #eeeeee;}/* 導(dǎo)航 */.nav {width: 100%;height: 30px;background-color: #666666;}/* 固定導(dǎo)航 */.fix-nav {position: fixed;top: 0;z-index: 999;}</style><div id="app"><div id="nav" class="nav" :class="{'fix-nav': navBarFixed}"></div></div><script>const app = new Vue({el: "#app",data() {return {navBarFixed: false,};},mounted() {// 事件監(jiān)聽滾動(dòng)條window.addEventListener("scroll", this.watchScroll);},destroyed() {// 移除事件監(jiān)聽window.removeEventListener("scroll", this.watchScroll);},methods: {watchScroll() {// 滾動(dòng)的距離var scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;// 容器的高度var offsetTop = document.querySelector("#nav").offsetHeight;console.log("scrollTop=>", scrollTop, " offsetTop=>", offsetTop);// 滾動(dòng)的距離如果大于了元素到頂部的距離時(shí)，實(shí)現(xiàn)吸頂效果if (scrollTop > offsetTop) {this.navBarFixed = true;} else {this.navBarFixed = false;}},},});</script></body>
</html>
參考
Vue 事件監(jiān)聽實(shí)現(xiàn)導(dǎo)航欄吸頂效果（頁(yè)面滾動(dòng)后定位）
總結(jié)
以上是生活随笔為你收集整理的Vue实现导航栏吸顶效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 各大搜索引擎收录提交入口
- 下一篇： Alienware TactX 更换了德