Vue实现导航栏吸顶效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>Vue实现导航栏吸顶效果</title></head><body><script src="static/js/vue.js"></script>
·
<!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>
更多推荐
已为社区贡献51条内容
所有评论(0)