小程序之头部固定

html

   <view class="{{scrollTop>100 ? 'topnavFixed' : ''}}" > 
      <view class="nav_tab{{scrollTop>100 ? ' mtop35' : ''}}">
      <!-- 如果选中的下标等于当前的索引，就使用active class名，否则class名为common  nav_tab-->
        <view wx:for="{{list}}" wx:key="list" class="{{selected==index?'active':'common'}}" data-index='{{index}}' bindtap="selected">{{item}}
        <!-- 如果选中的下标等于当前的索引，就添加下划线 -->   
        <view class="{{selected==index?'nav_underline':''}}"></view>
        </view>
      </view>
    </view>

css

.nav_title{
  margin-top:40rpx;
}

.nav_tab {
  width: 60%;
  height:100rpx;
  line-height:100rpx;
  display: flex;
  z-index: 1;
}
/* 头部固定 */
.topnavFixed{
  position:fixed;
  width:100%;
  height:130rpx;
  top:0rpx;
  background:#00C1FF;
  z-index: 1;
}
.mtop35{
  margin-top: 35rpx;
}
.none{
  display: none;
}
/* 未选中的样式 */
.common {
  text-align: center;
  color: #333;
  font-size: 28rpx;
  flex:1;
  opacity: 0.5;
}
/* 选中时的样式 */
.active {
  text-align: center;
  color: #000;
  flex:1;
  font-size: 40rpx;
}
/* 下划线的样式 */
.nav_underline {
  background: skyblue;
  height: 6rpx;
  border-radius: 8rpx;
  margin:-20rpx 30rpx;
}

js

  onPageScroll: function (e) { //监听页面滚动
    this.setData({
      scrollTop: e.scrollTop
    })
  },

借鉴： https://blog.youkuaiyun.com/Homer_Simpson/article/details/85136784