Vue 自動吸頂
阿新 • • 發佈:2018-09-14
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 varoffsetTop = 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 自動吸頂