小程序通过wx.createSelectorQuery操作DOM节点来在页面某处显示内容

可以先复制代码到页面查看效果

<scroll-view scroll-y='true' style="height:100vh;" bindscroll="bindscroll" scroll-into-view="{{toview}}">
	<view class="rol">
		<text class="title" id="normalServe">常用应用text>
		<text class="title" id="normalServe1">常用应用2text>
		<text class="title" id="normalServe2">常用应用3text>
	view>
scroll-view>
<view class="dadasfa"  wx:if="{{showNav}}"> dsadasfaf
view>

data: {
    showNav:false
  },
  bindscroll: function() {
    const query = wx.createSelectorQuery()                // 创建节点查询器 query
    query.select('#normalServe1').boundingClientRect()     // 这段代码的意思是选择Id=normalServe的节点，获取节点位置信息的查询请求
    query.selectViewport().scrollOffset()                 // 这段代码的意思是获取页面滑动位置的查询请求
    query.exec((res) => {
      if (res[0].top > 0) {
        this.setData({
          showNav: false
        })
      } else {
        this.setData({
          showNav: true
        })
      }                                    // #productServe节点的到页面顶部的距离
    })
  },

.rol{
  display: flex;
  flex-direction: column;
}
.title{
  height: 800rpx;
  width: 100%;
  border-bottom: 1rpx solid red;
}
.dadasfa{
  position: fixed;
  top: 20%;
  left: 20%;
  font-size: 30rpx;
  color: red;
}