1. 程式人生 > >Vue 自動吸頂

Vue 自動吸頂

dde create pan 事件 troy true vue osi move

html 元素:

<div class=‘container‘ ref=‘topTab‘>
    <div class="absolute" :class=‘{fixed:isFixed}‘>
        <!-- tab-->
    </div>
    <div>
        <!-- content -->
    </div>
</div>
<style>
    .container{
        padding-top: 40px; position: relative
; } .absolute{ position: absolute; width:100%; top:0; left:0; } .absolute.fixed{ position: fixed; } </style>

綁定事件:

  methods:{
    onScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var
offsetTop = this.$refs.topTab.offsetTop // console.log(scrollTop , offsetTop) if (scrollTop > offsetTop) { this.isFixed = true } else { this.isFixed = false } }, }, created () { window.addEventListener(‘scroll‘, this.onScroll) }, destroyed () { window.removeEventListener(
‘scroll‘, this.onScroll) },

Vue 自動吸頂