孤单的是人，寂寞的是心。
这只是我写的一个简单的demo,但是所需数据与逻辑已走通, 拿走就能用的那种,希望你能看完
<template><div><div class="nav"></div><div class="searchBar" ref="searchBar" style="width:100px;height:100px;overflow:scroll"><ul :class="searchBarFixed == true ? 'isFixed' :''"> <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><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><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><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><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() {this.box = this.$refs.searchBarvar $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.searchBarconsole.log("box.scrolltop:"+box.scrollTop+" box.offsetTop:"+box.offsetTop)}}};</script><style lang="less" scope>.nav {height: 250px;}.content {height: 1900px;}.searchBar {.isFixed {position: fixed;background-color: #fff;top: 0;z-index: 999;}}</style>
