前端页面滚动时固定导航栏

vue + vant

1、如果导航栏就在顶部时，只需样式固定在顶部就好
2、但是想要固定的部分，不在导航栏，需要页面滚动到导航栏时固定，划回去的时候又不要固定时，可参考以下代码

Video_2021-08-06_102128

html部分

<!-- 上面有一些其他显示的东西-->
<div id="yj_bot">
  <!-- 需固定区-->
  <div :class="{'fixed': isFixed, 'main_bg_color': true}" >
    <van-tabs v-model="active"  :background="background">
      <van-tab title="全部"></van-tab>
      <van-tab title="卡片"></van-tab>
      <van-tab title="收款"></van-tab>
    </van-tabs>  
  </div>
   <!-- 内容区-->
  <div>内容区</div>
</div>

js部分

data () {
	return {
	    active: 0,
		isFixed: false
	}
},
methods: {
	handleScroll () {
      let scrollY = window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop
      let scrollObj = document.querySelector('#yj_bot').offsetTop
      if (scrollY >= scrollObj) {
        this.isFixed = true
      } else {
        this.isFixed = false
      }
    }
},
mounted () {
	window.addEventListener('scroll', this.handleScroll)
}

<style scoped>
  .fixed{position: fixed;width: 100%;z-index: 99;top: 0;}
<style>