一直显示自己的排名列表

最近公司要写个小程序，里面有个列表，觉得这不是很高大上嘛，设计图还没出来， 先写了个demo，不多bb，看图

图看完了，直接上代码

视图View：

<text>pages/test/index.wxml</text>
<view class='body' view id="id" bindtap = "handletap" bindtouchstart = "handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend">

  <view class='option'>1</view>
  <view class='option'>2</view>
  <view class='option'>3</view>
  <view class='option'>4</view>
  <view class='option'>5</view>
  <view class='option'>6</view>
  <view class='option'>7</view>
  <view class='option'>8</view>
  <view class='option'>9</view>
  <view class='option'>10</view>
  <view class='option'>11</view>
  <view class='option'>12</view>
  <view class='option'>13</view>
  <view class='option'>14</view>
  <view class='option'>15</view>
  <view class='option'>16</view>
  <view class='option'>17</view>
  <view class='option'>18</view>
  <view class='option'>19</view>
  <view class='option'>20</view>
  <view class='option' id='ohye'>21、ohye</view>
  <view class='option'>22</view>
  <view class='option'>23</view>
  <view class='option'>24</view>
  <view class='option'>25</view>
  <view class='option'>26</view>
  <view class='option'>27</view>
  <view class='option'>28</view>
  <view class='option'>29</view>
  <view class='option'>30</view>
  <view class='option'>31</view>
  <view class='option'>32</view>
  <view class='option'>33</view>
  <view class='option'>34</view>
  <view class='option'>35</view>

</view>
<view class='top' hidden='{{isShow}}'>21、ohye</view>

CSS:

.body{
  height: 4000px;
  border: 1px solid red;
}
.option{
  height: 96px;
  margin: 2px;
  background-color: greenyellow
}

.top{
  position:fixed;
  bottom: 0px;
  width:100%;
  height: 50px;
  background-color: red;
}

JS:

// pages/test/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isShow: false,
    Top: 0,//获取元素离文档顶部距离
    windowHeight: 0,//屏幕显示区域高度
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;

    wx.getSystemInfo({//获取屏幕显示区域高度
      success: function (res) {
        // console.log(res.windowWidth);
        // console.log(res.windowHeight);
        that.setData({
          windowHeight: res.windowHeight,
        })
        console.log("屏幕显示高度" + res.windowHeight)
      },
    })

    //获取元素离文档顶部距离
    var query = wx.createSelectorQuery()
    query.select('#ohye').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function (res) {
      res[0].top       // #the-id节点的上边界坐标
      res[0].scrollTop // 显示区域的竖直滚动位置
      that.setData({
        Top: res[0].top
      })
    })
  },

  onPageScroll: function (e) {//e.scrollTop 当前文档向上滚动距离
    var that = this
    // console.log(e.scrollTop);//{scrollTop:99}
    // console.log(that.data.Top)
    console.log("元素距离顶部距离" + that.data.Top)
    console.log("屏幕显示高度" + that.data.windowHeight)
    console.log("元素向上移动距离" + e.scrollTop)
    console.log("元素需要移动的距离" + (that.data.Top - that.data.windowHeight))
    console.log(e.scrollTop < (that.data.Top - that.data.windowHeight) || e.scrollTop > that.data.Top)

    
    if (e.scrollTop < (that.data.Top - that.data.windowHeight) || e.scrollTop > that.data.Top) {//判断元素在屏幕显示区域的上方或下方
      that.setData({
        isShow: false,
      })
    } else {//否则元素在屏幕显示区域当中
      that.setData({
        isShow: true,
      })
    }
  },

})