评论

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

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

利用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  
点赞 5
收藏
评论

12 个评论

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

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

    2020-05-23
    赞同 3
    回复
  • 月色冷清泉
    月色冷清泉
    05-26

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

    05-26
    赞同
    回复
  • Bill
    Bill
    04-15

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

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

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

    包裹了就不行


    2021-06-14
    赞同
    回复 1
    • 于淼
      于淼
      05-25
      把class="sticky"放到view里面就可以了
      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
  • Esso
    Esso
    2020-07-17

    学习了

    2020-07-17
    赞同
    回复

正在加载...

登录 后发表内容