<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue實現導航欄吸頂效果</title>
</head>
<body>
<script src="static/js/vue.js"></script>
<style>
body {
margin: 0;
}
/* 背景 */
#app {
height: 2000px;
margin: 0 auto;
background-color: #eeeeee;
}
/* 導航 */
.nav {
width: 100%;
height: 30px;
background-color: #666666;
}
/* 固定導航 */
.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() {
// 事件監聽滾動條
window.addEventListener("scroll", this.watchScroll);
},
destroyed() {
// 移除事件監聽
window.removeEventListener("scroll", this.watchScroll);
},
methods: {
watchScroll() {
// 滾動的距離
var scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
// 容器的高度
var offsetTop = document.querySelector("#nav").offsetHeight;
console.log("scrollTop=>", scrollTop, " offsetTop=>", offsetTop);
// 滾動的距離如果大於了元素到頂部的距離時，實現吸頂效果
if (scrollTop > offsetTop) {
this.navBarFixed = true;
} else {
this.navBarFixed = false;
}
},
},
});
</script>
</body>
</html>
Vue實現導航欄吸頂效果
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章