VUE 之实现滚动监听 导航栏置顶的效果

VUE 实现滚动监听 导航栏置顶的效果


html：

	<div class="searchsubbox" id="fixedBar" :class="{ fixedBar: isFixed }">
      <ul class="searchul">
        <li @click="getSonAreaListData" :class="{ on: quyudownshow }">
          <p>
            <span>区域span>
            <i>i>
          p>
        li>
        <li @click="getPriceListData" :class="{ on: jiagedownshow }">
          <p>
            <span>均价span>
            <i>i>
          p>
        li>
        <li @click="getapartmentListData" :class="{ on: huxingdownshow }">
          <p>
            <span>户型span>
            <i>i>
          p>
        li>
      ul>
    div>
    <div :style="{ marginTop: marginTop }"> 
	  
	div>
	
	<style>
	 .fixedBar {
	  position: fixed;
	  top: 0;
	  z-index: 999;
	  width: 100%;
	 }
	style>

js:

data () {
 isFixed: false, // bar浮动
 offsetTop: 0, // 触发bar浮动的阈值
 marginTop: 0, // 触发bar浮动的同时 给数据列表一个margin-top 防止列表突然上移 会很突兀,有时候不写也可以，根据项目自选；
},
mounted () {
 // 设置bar浮动阈值为 #fixedBar 至页面顶部的距离
 this.offsetTop = document.querySelector('#fixedBar').offsetTop;
 
 // 开启滚动监听
 window.addEventListener('scroll', this.handleScroll);
},
// 滚动监听 滚动触发的效果写在这里
handleScroll () {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  
  if (scrollTop >= this.offsetTop) {
   this.isFixed = true;
   this.marginTop = document.querySelector('#fixedBar').offsetHeight + 'px';
  } else {
   this.isFixed = false;
   this.marginTop = 0;
  }
}

部分借鉴于：https://www.jb51.net/article/147224.htm