vue实现固定位置显示功能
编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
这篇文章主要介绍了vue实现固定位置显示功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
在vue项目中实现吸顶效果.
比如说，我们要实现的功能是导航栏在页面下滑到一定位置之后，便固定不定。
首先：要在mounted生命周期内监听'scroll'事件，事件触发后，执行一个处理滚动的函数。
window.addEventListener('scroll', this.handleScroll)
methods:{
handleScroll () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
var offsetTop = document.querySelector('#searchBar').offsetTop
if (scrollTop > offsetTop) { //判断是否到达了顶部
this.searchBarFixed = true
} else {
this.searchBarFixed = false
}
}
}
完整源代码如下：
<template>
<div>
<div class="nav"></div>
<div class="searchBar" id="searchBar">
<ul :class="searchBarFixed == true ? 'isFixed' :''"> //用v-bind绑定样式
<li>区域<i class="iconfont icon-jiantouxia"></i></li>
<li>价格<i class="iconfont icon-jiantouxia"></i></li>
<li>房型<i class="iconfont icon-jiantouxia"></i></li>
<li>更多<i class="iconfont icon-jiantouxia"></i></li>
</ul>
</div>
<div class="content">
</div>
</div>
</template>
<script>
export default {
components:{
},
mounted () {
window.addEventListener('scroll', this.handleScroll)
},
data(){
return {
searchBarFixed:false
}
},
methods:{
handleScroll () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
var offsetTop = document.querySelector('#searchBar').offsetTop
if (scrollTop > offsetTop) {
this.searchBarFixed = true
} else {
this.searchBarFixed = false
}
},
}
}
</script>
<style lang="less" scope>
.nav{
height: 250px;
}
.content{
height: 1900px;
}
.searchBar{
.isFixed{
position:fixed;
background-color:#Fff;
top:0;
z-index:999;
}
ul {
width:100%;
height: 40px;
line-height: 40px;
display: flex;
li {
list-style: none;
font-size: 0.8rem;
text-align: center;
flex: 1;
i {
font-size: 0.9rem;
padding-left: 5px;
color: #ccc;
}
}
border-bottom: 1px solid #ddd;
}
}
</style>
总结
以上所述是长沙网络推广给大家介绍的vue实现固定位置显示功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！
如果你觉得本文对你有帮助，欢迎网络推广网站推广转载，烦请注明出处，谢谢！
上一篇：浅谈Vue的响应式原理
下一篇：搭建一个Koa后端项目脚手架的方法步骤