评论

小程序内完美实现吸顶粘附功能（媲美 美团小程序的吸顶效果）如丝滑一般

2020-04-02
15793浏览
13评论

小程序完美实践吸顶粘附效果

利用css属性完美解决吸顶粘附效果（ios&android都适用），分享一下心得：

tips：不需要调用onPageScroll 方法 去监听滚动距离！！！

1、给吸顶元素添加css属性 position: sticky;

2、给元素设置距离顶部吸附的距离 top: 0px; （这个top值你可以根据实际情况动态设置）

3、然后完事了啦啦啦啦啦啦啦啦~

by the way：附上简单的代码片段------>

https://developers.weixin.qq.com/s/pR8QKjmE7igq



最后一次编辑于  2020-04-02  
点赞 10
收藏
评论

13 个评论

  • passion to live
    passion to live
    2020-05-23

    有一个不生效的情况：当设置了 sticky的元素被 ScrollView包裹时，不会吸附~ 好神奇

    2020-05-23
    赞同 4
    回复
  • 無印.
    無印.
    08-07

    有个大问题，我使用了自定义的头部导航栏之后，不能用这个了，一用就被覆盖，或者不能完美吸附，怎么解决？


    08-07
    赞同
    回复
  • 乐一个
    乐一个
    2022-05-26

    如果吸顶内部有横向滚动，如overflow-x: auto， 在ios中，滑动到最底部后，继续上拉，吸顶中的内容会消失

    2022-05-26
    赞同
    回复 2
    • Sily
      Sily
      2022-11-28
      请问这个问题有什么解决办法吗
      2022-11-28
      赞
      回复
    • 寄个饼给你啃
      寄个饼给你啃
      2023-07-25
      同问
      2023-07-25
      赞
      回复
  • Bill
    Bill
    2022-04-15

    页面向上滚动的时候，开启sticky的元素会不停的抖动，是为什么呀？

    2022-04-15
    赞同
    回复
  • ネф イω
    ネф イω
    2021-06-14

    <view><button type='primary' class="sticky">吸顶元素</button></view>

    包裹了就不行


    2021-06-14
    赞同
    回复 1
    • 于淼
      于淼
      2022-05-25
      把class="sticky"放到view里面就可以了
      2022-05-25
      赞
      回复
  • Aoi@杨
    Aoi@杨
    2020-09-21

    学习到了

    2020-09-21
    赞同
    回复
  • Aoi@杨
    Aoi@杨
    2020-09-21

    我的收藏个

    2020-09-21
    赞同
    回复
  • Aoi@杨
    Aoi@杨
    2020-09-21

    我的收藏个

    2020-09-21
    赞同
    回复
  • Aoi@杨
    Aoi@杨
    2020-09-21

    我的收藏个

    2020-09-21
    赞同
    回复
  • 平凡的世界
    平凡的世界
    2020-08-04

    感谢楼主，非常有用，搞了一上午的onPageScroll，居然用一个css属性就搞定了

    2020-08-04
    赞同
    回复 1

正在加载...

请 登录 后发表内容
作者介绍

文章标签
小程序吸顶吸顶效果