微信小程序指定盒子上滑置顶（记录）_微信小程序上划盒子上升

wxml代码：

<!-- 盒子一号   置顶盒子-->
<view class="{{fixedNav?'topnavFixed':'topic-view'}}" id="topic"></view>
<!-- 盒子二号---滚动区域 -->
<view id='content'></view>
1
2
3
4

js代码：

onPageScroll: function(e) {

    const query = wx.createSelectorQuery()
    query.select('#topic').boundingClientRect((rect) => {
      let top = rect.top
      // 盒子一号距顶
      if (top <= 20) { //距离顶部距离，根据情况自行修改
        this.setData({
          fixedNav: true //是否固定导航栏
        })
      } else{
        this.setData({
          fixedNav: false
        })
      }
    }).exec()


    const contentQuery= wx.createSelectorQuery()
    contentQuery.select('#content').boundingClientRect((rect) => {
      let contentTop  = rect.top
      //盒子二号
      if (contentTop >= 150) {  //盒子二号距离顶部距离，根据情况自行修改
        this.setData({
          fixedNav: false //是否固定导航栏
        })
      } else {
        this.setData({
          fixedNav: true
        })
      }
    }).exec()

  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34