吸顶效果—position:sticky的vue组件化和兼容性解决

封装

<template> <div class="header_sticky"> <slot></slot> </div> </template> <script> export default { name: 'stickyHeader', computed: { randomId: function(){ return 'randomId_' + Number(Math.random().toString().substr(3,3) + Date.now()).toString(36); }, targetElement_: function() { return this.$el } },
　　mounted() {
　　　//获取高度变化
　　　　this.$refs.sticky_.sticky()　
　　}, methods: { // css: 用于替换的css样式; (一般用默认的) sticky_(css='sticky_') { if (CSS.supports('position', 'sticky') || CSS.supports('position', '-webkit-sticky')) { console.log('>>>>>>>>> sticky is supported') } else { let newNodeTop; let header = this.targetElement_; if(document.getElementById(this.randomId)) { newNodeTop = document.getElementById(this.randomId); }else{ newNodeTop = document.createElement("div"); newNodeTop.id = this.randomId; header.parentNode.insertBefore(newNodeTop, header); header.classList.add(css); } setTimeout(() => { let height = header.offsetHeight + 1; //高度 + 1 以防有小数点 newNodeTop.style.height = height + 'px'; }, 0) } },
　　　　watch: {
　　　　　　oldToNew(newVal, oldVal) {
　　　　　　　　if(newVal.length !== oldVal.length) {
　　　　　　　　　　this.$refs.sticky_.sticky()
　　　　　　　　}
　　　　　　}
　　　　}, } } </script>
<style scoped>

.header_sticky { width: 100%; position: sticky; position: -webkit-sticky; top: 0; z-index: 100; transition: height 1s; -moz-transition: height 1s; -webkit-transition: height 1s; -o-transition: height 1s; } .sticky_ { width: 100%; position: fixed; position: -webkit-fixed; top: 0; z-index: 100; }

</style>

---

使用

---

<sticky-header ref="sticky_"> <!-- contents --> </sticky-header>