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

川长思鸟来 2023-07-20 08:28 12阅读 0赞

[http://www.rioyi.com/a/news/fangan/235.html][http_www.rioyi.com_a_news_fangan_235.html]

[https://www.jb51.net/article/160371.htm][https_www.jb51.net_article_160371.htm]

[https://www.cnblogs.com/lishuang2243/p/10998432.html][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;
    }

[http_www.rioyi.com_a_news_fangan_235.html]: http://www.rioyi.com/a/news/fangan/235.html
[https_www.jb51.net_article_160371.htm]: https://www.jb51.net/article/160371.htm
[https_www.cnblogs.com_lishuang2243_p_10998432.html]: https://www.cnblogs.com/lishuang2243/p/10998432.html