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

 

 

 

vue组件化

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

 1 
 6 

/***********      ！要用异步获取高度       */

css

 1 .header_sticky {
 2     width: 100%;
 3     position: sticky;
 4     position: -webkit-sticky;
 5     top: 0;
 6     z-index: 100;
 7     transition: height 1s;
 8     -moz-transition: height 1s;
 9     -webkit-transition: height 1s;
10     -o-transition: height 1s;
11 }
12 
13 .sticky_ {
14     width: 100%;
15     position: fixed;
16     position: -webkit-fixed;
17     top: 0;
18     z-index: 100;
19 }

在watch中监听高度变化

1 watch: {
2             oldToNew(newVal, oldVal) {
3                 if(newVal.length !== oldVal.length) {
4                     this.$refs.sticky_.sticky_()
5                 }
6             }
7         }

在mounted中获取高度变化

this.$refs.sticky_.sticky_()

 

 

<使用>

html

<sticky-header ref="sticky_">
    
sticky-header>

 

转载于:https://www.cnblogs.com/jevons-lee/p/9916138.html