溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在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實現固定位置顯示功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
