微信小程序 页面滚动头部固定顶部

http://www.rioyi.com/a/news/fangan/235.html

https://www.jb51.net/article/160371.htm

https://www.cnblogs.com/lishuang2243/p/10998432.html

我的代码：

在小程序自带的方法 onPageScroll中可以得到滑动距离顶部的距离，在data公共数据中定义scrollTop,代码如下

<view class="title {{scrollTop > 30 ? 'topnav' : ''}}">

data: {
  scrollTop:0,
}

onPageScroll: function (e) {
    var _this = this;
    // console.log(e.scrollTop)
    _this.setData({
    scrollTop:e.scrollTop
    })
  },

得到滑动距离后，当页面滑动超出需要固定元素距离顶部的距离后使用css样式控制其定位，

因此为要在scroll-view中定义class="title {{scrollTop> 30 ? 'topnav' : ''}}"

30就是我需要定义的模块距离顶部的距离，当超过这个距离就会执行css的topnav样式

/* 头部固定 */
.topnav{
  position: fixed;
  top: 0rpx;
  left: 0;
  z-index:99;
  background: #fff;
  padding: 3%;
  width: 94%;
  z-index:999;
}

否则就执行愿有的css样式。

第二种：使用scroll-view 配合bindscroll

wxml:
<scroll-view style="width:100%;height: 100%;" scroll-y="true" bindscroll="scrollTopFun">
<view class="title {{scrollTop > 30 ? 'topnav' : ''}}">
</view>
</scroll-view>

wxjs:
data: {
  scrollTop:0,
}
  //头部固定
  scrollTopFun(e){
    let _this = this;
    let scrollTop = e.detail.scrollTop;
    _this.setData({
    scrollTop:scrollTop
 })

wxss:
/* 头部固定 */
.topnav{
  position: fixed;
  top: 0rpx;
  left: 0;
  z-index:99;
  background: #fff;
  padding: 3%;
  width: 94%;
  z-index:999;
}