Vue 滚动导航栏固定(导航吸顶)
https://www.jianshu.com/p/3786ee55466chttps://blog.csdn.net/mouday/article/details/106782511https://blog.csdn.net/doinb_6/article/details/81872405<!-- 吸顶 --><template><div class="scroll
·
https://www.cnblogs.com/nbwsj/p/12122689.html
<!-- 吸顶 -->
<template>
<div class="scroll">
<div class="header">header</div>
<div class="nav" :class="navBarFixed == true ? 'navBarWrap' :''">吸顶导航</div>
</div>
</template>
<script>
export default {
data() {
return {
navBarFixed: false,
};
},
components: {},
mounted() {
window.addEventListener("scroll", this.watchScroll);
},
methods: {
watchScroll() {
var scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
console.log(scrollTop)
// 当滚动超过 90 时,实现吸顶效果
if (scrollTop > 90) {
this.navBarFixed = true;
} else {
this.navBarFixed = false;
}
}
}
};
</script>
<style scoped>
.scroll{
height:2000px;
}
.header {
height: 90px;
background: red;
text-align: center;
color: #fff;
}
.nav{
padding:15px;
width:100%;
box-sizing: border-box;
background:greenyellow;
text-align: center;
}
.navBarWrap {
position:fixed;
top:0;
z-index:999;
}
</style>
更多推荐
已为社区贡献60条内容
所有评论(0)