微信小程序吸顶两种方式，一种js,一种css (position: sticky； top: 0；)

1.比较常用的方式，通过js获取当前元素距离顶部的高度，同时通过onPageScroll监听页面滚动的高度，对比二者的大小，通过fixed定位来实现置顶悬浮。（此方式需注意，不要一直setdata，不然会出现卡顿现象）。

1. wxml

<view style="width: 100%; height: 300rpx; background: rgba(0,0,0,0.1); margin-top:30rpx;"></view>
<view style="width: 100%; height: 300rpx; background: rgba(0,0,0,0.1); margin-top:30rpx;"></view>

<!-- 需要吸顶的部分 -->
<view class="list-all">
	<scroll-view scroll-x class="list {{is_fixed?'fixed':''}}" id="navbar">
		<view class="li {{index==current?'active':''}}" wx:for='{{navlist}}' wx:key='index' data-index='{{index}}' catchtap="click_li">{{item}}</view>
	</scroll-view>
	<!-- 用于吸顶后 占位用的 -->
	<view class="list" wx:if="{{is_fixed}}"></view>
</view>

<block wx:for="{{20}}" wx:key='index'>
	<view style="width: 100%; height: 100rpx; background: rgba(0,0,0,0.1); margin-top:30rpx;"></view>
</block>

1.2 wxss

.list-all {
  width: 100%;
}

.list-all .list {
  width: 100%;
  height: 80rpx;
  background: #fff;
  border-bottom: solid 1px #eee;
  top: 0;
  left: 0;
  z-index: 100;
  font-size: 0;
  white-space: nowrap;
}

.list-all .list.fixed {
  position: fixed;
}

/* 以下的代码不重要 */
.list-all .list .li {
  width: 188rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 30rpx;
  color: #333;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
}

.list-all .list .li::after {
  content: "";
  width: 60%;
  height: 3px;
  border-radius: 2px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
}

.list-all .list .li.active {
  color: #1490ce;
  font-weight: bold;
}

.list-all .list .li.active::after {
  background: linear-gradient(160deg, rgba(8, 220, 230, 0.7) 10%, rgba(0, 140, 255, 0.7) 90%);
}

1.3 js

Page({
  data: {
    nav_bar_top: 0, //导航栏初始化距顶部的距离
    is_fixed: false, //是否固定顶部
    navlist:['新房','二手房','租房','公寓','车位'],
    current:0
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var that = this;
    if (that.data.nav_bar_top == 0) {
      //获取节点距离顶部的距离
      wx.createSelectorQuery().select('#navbar').boundingClientRect(function (rect) {
        if (rect && rect.top > 0) {
          var nav_bar_top = parseInt(rect.top);
          that.setData({
            nav_bar_top: nav_bar_top
          });
        }
      }).exec();
    }
  },

  /**
   * 监听页面滑动事件
   */
  onPageScroll: function (e) {
    var that = this;
    var scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度
    //判断'滚动条'滚动的距离 和 '元素在初始时'距顶部的距离进行判断
    var is_result = scrollTop >= that.data.nav_bar_top ? true : false;
    //为了防止不停的setData, 这儿做了一个等式判断。 只有处于吸顶的临界值才会不相等
    if (that.data.is_fixed === is_result) {
      return false;
    }
    that.setData({
      is_fixed: is_result
    });
  },
  click_li(event){
    console.log(event)
    var index = event.currentTarget.dataset.index;
    this.setData({
      current:index
    });
  }
})

2.通过css来实现（position: sticky;top: 0;）

2.1wxml

<view style="width: 100%; height: 300rpx; background: rgba(0,0,0,0.1); margin-top:30rpx;"></view>
<view style="width: 100%; height: 300rpx; background: rgba(0,0,0,0.1); margin-top:30rpx;"></view>

<!-- 需要吸顶的部分 -->
<view class="list-all">
	<scroll-view scroll-x class="list" id="navbar">
		<view class="li {{index==current?'active':''}}" wx:for='{{navlist}}' wx:key='index' data-index='{{index}}' catchtap="click_li">{{item}}</view>
	</scroll-view>
</view>

<block wx:for="{{20}}" wx:key='index'>
	<view style="width: 100%; height: 100rpx; background: rgba(0,0,0,0.1); margin-top:30rpx;"></view>
</block>

2.2 wxss

.list-all {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 100;
}

.list-all .list {
  width: 100%;
  height: 80rpx;
  background: #fff;
  border-bottom: solid 1px #eee;
  font-size: 0;
  white-space: nowrap;
}


/* 以下的代码不重要 */
.list-all .list .li {
  width: 188rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 30rpx;
  color: #333;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
}

.list-all .list .li::after {
  content: "";
  width: 60%;
  height: 3px;
  border-radius: 2px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
}

.list-all .list .li.active {
  color: #1490ce;
  font-weight: bold;
}

.list-all .list .li.active::after {
  background: linear-gradient(160deg, rgba(8, 220, 230, 0.7) 10%, rgba(0, 140, 255, 0.7) 90%);
}

2.3 js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    navlist:['新房','二手房','租房','公寓','车位'],
    current:0
  },
  click_li(event){
    console.log(event)
    var index = event.currentTarget.dataset.index;
    this.setData({
      current:index
    });
  }
})

3.说明

3.1 css 方式的 position: sticky 在web端有兼容 问题，使用时需注意兼容，但小程序端是可以用的。官网传送门

3.2 也可看看这 https://blog.csdn.net/qq_35585701/article/details/81040901