position: sticky 的vue组件化使用与兼容性写法

vue组件化

原理：检查是否兼容position: sticky ，若兼容就使用，若不兼容则在watch监听高度(若高度是变化的)或者在mounted中直接调用(高度不变)

注意：要用异步获取高度

css

.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;
}

在watch中监听高度变化

watch: {
            oldToNew(newVal, oldVal) {
                if(newVal.length !== oldVal.length) {
                    this.$refs.sticky_.sticky_()
                }
            }
        }

在mounted中获取高度变化

this.$refs.sticky_.sticky_()

<使用>

html