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

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

1. wxml

	
		{{item}}
	
	
	



	

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

	
		{{item}}
	



	

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