小程序滑到指定位置固定导航

之前在开发小程序的时候，有一个需求，页面滑倒指定位置时固定某一块内容，在此做个记录：

思路：1、监听滚动条的位置；

　　　2、获取指定位置元素的高度；

　　　3、当滚动条的高度大于指定元素的高度时，添加固定定位样式；

最终效果图如下：

代码部分：

 1 <view class="container" style="{{scrollTop > bannerHeight ? 'padding-top:170rpx' : ''}}">
 2     <view class="input_box flex-x">
 3         <input placeholder="搜索"></input>
 4     </view>
 5 
 6     <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular>
 7         <block wx:for="{{background}}" wx:key="*this">
 8             <swiper-item>
 9                 <image class="swiper-item {{item}}" src=""></image>
10             </swiper-item>
11         </block>
12     </swiper>
13 
14   <view class="{{scrollTop > bannerHeight ? 'nav_fixed' : ''}}">
15     <view class="nav flex-x">
16       <view class="active">推荐</view>
17       <view>新闻动态</view>
18       <view>知识库</view>
19     </view>
20   </view>
21 
22   <view class="list flex-x" wx:for="{{20}}" wx:key="index">
23     内容内容内容内容内容内容内{{index + 1}}
24   </view>
25 
26 </view>

 1 page {
 2   background-color: #f2f2f2;
 3   font-size: 28rpx;
 4   color: #333;
 5 }
 6 
 7 .flex-x {
 8   display: flex;
 9   align-items: center;
10 }
11 
12 .container {
13   padding: 90rpx 30rpx 0;
14   box-sizing: border-box;
15 }
16 
17 .input_box {
18   width: 100%;
19   height: 90rpx;
20   background-color: #fff;
21   position: fixed;
22   top: 0;
23   left: 0;
24   z-index: 99;
25   padding: 0 30rpx;
26   box-sizing: border-box;
27 }
28 
29 input {
30   height: 60rpx;
31   background-color: #f0f0f0;
32   border-radius: 30rpx;
33   flex-grow: 1;
34   text-align: center;
35 }
36 
37 image {
38   width: 100%;
39   height: 100%;
40 }
41 
42 .demo-text-1 {
43   background-color: red;
44 }
45 
46 .demo-text-2 {
47   background-color: pink;
48 }
49 
50 .demo-text-3 {
51   background-color: green;
52 }
53 
54 .nav {
55   width: 100%;
56   height: 80rpx;
57   justify-content: space-around;
58   border-bottom: 2rpx solid #f2f2f2;
59   background-color: #fff;
60 }
61 
62 .nav > view {
63   text-align: center;
64   color: #999;
65 }
66 
67 .nav > view.active {
68   color: #333;
69 }
70 
71 .list {
72   height: 160rpx;
73   background-color: pink;
74   margin-bottom: 2rpx;
75 }
76 
77 .nav_fixed {
78   position: fixed;
79   top: 90rpx;
80   left: 0;
81   width: 100%;
82   height: 80rpx;
83 }

 1 Page({
 2 
 3   /**
 4    * 页面的初始数据
 5    */
 6   data: {
 7     background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
 8     indicatorDots: true,
 9     vertical: false,
10     autoplay: true,
11     interval: 2000,
12     duration: 500,
13     bannerHeight: 0,  //banner高度
14     scrollTop: 0, //滚动条高度
15   },
16 
17   /**
18    * 生命周期函数--监听页面加载
19    */
20   onLoad: function (options) {
21     // 获取swipre高度
22     wx.createSelectorQuery().select('.swiper').boundingClientRect((rect) => {
23       console.log('banner高度', rect.height)
24       this.setData({
25         bannerHeight: rect.height
26       })
27     }).exec()
28   },
29 
30   /**
31    * 监听滚动条
32    */
33   onPageScroll: function(e) {
34     console.log('滚动条位置', e.scrollTop)
35     this.setData({
36       scrollTop: e.scrollTop
37     })
38   },
39 
40   /**
41    * 生命周期函数--监听页面初次渲染完成
42    */
43   onReady: function () {
44     
45   },
46 
47   /**
48    * 生命周期函数--监听页面显示
49    */
50   onShow: function () {
51     
52   },
53 
54   /**
55    * 生命周期函数--监听页面隐藏
56    */
57   onHide: function () {
58     
59   },
60 
61   /**
62    * 生命周期函数--监听页面卸载
63    */
64   onUnload: function () {
65     
66   },
67 
68   /**
69    * 页面相关事件处理函数--监听用户下拉动作
70    */
71   onPullDownRefresh: function () {
72     
73   },
74 
75   /**
76    * 页面上拉触底事件的处理函数
77    */
78   onReachBottom: function () {
79     
80   },
81 
82   /**
83    * 用户点击右上角分享
84    */
85   onShareAppMessage: function () {
86     
87   }
88 })