vue 滚动条滚动到列表的某个区域时，将(负责的、参与的、管理的)区域的title固定到头部

1、html

1 <div :id="item.id" class="list-item" v-for="(item, index) in okrTableDate" :key="index">
2    <p class="bold" :class="{ 'is-fixed': isFixedFlag1 && item.id === 'responsible' }" v-if="item.id === 'responsible'">{{item.titleName}}</p>
3    <p class="bold" :class="{ 'is-fixed': isFixedFlag2 && item.id === 'managed', 'top-fixed1': !fullScreenFlag,  'top-fixed2': fullScreenFlag }" v-else-if="item.id === 'managed'">{{item.titleName}}</p>
4    <p class="bold" :class="{ 'is-fixed': isFixedFlag3 && item.id === 'participating', 'top-fixed1': !fullScreenFlag,  'top-fixed2': fullScreenFlag }" v-else-if="item.id === 'participating'">{{item.titleName}}</p>
5    <p class="bold" v-else>{{item.titleName}}</p>
6    ...............
7 </div>

2、监听滚动条滚动事件

1 mounted () {
2    document.querySelector('#objectiveBox').addEventListener('scroll', this.handleScroll)
3 }

3、methods

 1 handleScroll () {
 2    let offsetHeight1 = 0
 3    let offsetHeight2 = 0
 4    if (document.querySelector('#objectiveBox') && document.querySelector('#responsible')) {
 5       let scrollTop = document.querySelector('#objectiveBox').scrollTop
 6       let offsetHeight = document.querySelector('#responsible').offsetHeight
 7       offsetHeight1 = offsetHeight
 8       if (scrollTop < offsetHeight && scrollTop) {
 9           this.isFixedFlag1 = true
10       } else {
11           this.isFixedFlag1 = false
12       }
13    }
14    if (document.querySelector('#objectiveBox') && document.querySelector('#managed')) {
15       let scrollTop = document.querySelector('#objectiveBox').scrollTop
16       let offsetHeight = document.querySelector('#managed').offsetHeight
17       offsetHeight2 = offsetHeight
18       if ((scrollTop - offsetHeight1) > 0 && scrollTop - offsetHeight1 < offsetHeight && scrollTop) {
19           this.isFixedFlag2 = true
20       } else {
21           this.isFixedFlag2 = false
22       }
23    }
24    if (document.querySelector('#objectiveBox') && document.querySelector('#participating')) {
25       let scrollTop = document.querySelector('#objectiveBox').scrollTop
26       let offsetHeight = document.querySelector('#participating').offsetHeight
27       if ((scrollTop - offsetHeight1 - offsetHeight2) > 0 && (scrollTop - offsetHeight1 - offsetHeight2) < offsetHeight && scrollTop) {
28           this.isFixedFlag3 = true
29       } else {
30           this.isFixedFlag3 = false
31       }
32    }
33 }

 

 

posted @ 2024-01-15 14:51  蓝色的矢车菊  阅读(24)  评论(0)  编辑  收藏  举报