vue让元素固定_vue 监听dom元素的滚动事件 实现某元素吸顶或者固定位置显示

孤单的是人，寂寞的是心。

这只是我写的一个简单的demo,但是所需数据与逻辑已走通, 拿走就能用的那种,希望你能看完

• 区域
• 价格
• 房型
• 更多
• 更多
• 更多
• 更多
• 更多
• 更多
• 更多
• 更多
• 更多
• 更多
• 更多
• 更多
• 更多
• 更多
• 更多

export default {

components: {},

mounted() {

this.box = this.$refs.searchBar

var $this = this

// 监听这个dom的scroll事件

this.box.onscroll = () => {

console.log('on scroll')

$this.handleScroll()

}

console.log(this.box.onscroll)

},

data() {

return {

searchBarFixed: false

};

},

methods: {

handleScroll() {

var scrollTop =

window.pageYOffset ||

document.documentElement.scrollTop ||

document.body.scrollTop;

let box = this.$refs.searchBar

console.log("box.scrolltop:"+box.scrollTop+" box.offsetTop:"+box.offsetTop)

}

}

};

.nav {

height: 250px;

}

.content {

height: 1900px;

}

.searchBar {

.isFixed {

position: fixed;

background-color: #fff;

top: 0;

z-index: 999;

}

}

再此附上我的QQ: 2489757828 有问题的话可以共同探讨

我的私人博客: 李大玄