评论

使用sticky实现悬浮按钮滑到"底部"隐藏

纯css实现,页面上的悬浮按钮,当滑动到底部(某个位置)时隐藏、反之则显示。

一、目标效果

页面上悬浮着【立即购买】,但用户点击立即购买,滚动到底部(或用户滑动到底部)时,隐藏【立即购买】。

二、之前的思路

先获取表单距离顶部距离,在onPageScroll里监听当前滚动距离,如果滚动距离 > 表单距离就隐藏【立即购买】,反之则显示,需要频繁监听滚动距离。

三、现在的思路

使用 sticky 做层级隐藏。

四、 代码片段

https://developers.weixin.qq.com/s/15MGPOmD7Ert

五、温馨提示

  1. 公司在自行开发、运营电商小程序,欢迎交流共同进步。
  2. 不定期分享文章,欢迎关注哈。


最后一次编辑于  2021-07-15  
点赞 1
收藏
评论
登录 后发表内容