支付宝小程序滚动监听吸顶效果

最新推荐文章于 2023-09-23 08:05:02 发布

helloxielan

最新推荐文章于 2023-09-23 08:05:02 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发

原文链接：http://www.cnblogs.com/fms-3/p/10180221.html

本文介绍了一种在页面滚动时使菜单栏固定定位的方法。通过监听页面滚动事件，判断菜单栏距离文档顶部的距离，动态调整菜单栏的CSS样式，实现菜单栏在滚动到特定位置时固定显示的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axml部分

<view class=" {{menuFixed ? 'fixed': ''}}" id="affix">菜单栏</view>

axss部分

.fixed{position: fixed; top: 0; }

js部分

Page({
  data: {
    menuFixed:"",
  },
  // 监听页面滚动距离scrollTop
  onPageScroll: function(e) {
    var that = this;
    // 3.当页面滚动距离scrollTop > 菜单栏距离文档顶部的距离时，菜单栏固定定位
    if (e.scrollTop > 500) {
      that.setData({
        menuFixed: true
      })
    } else {
      that.setData({
        menuFixed: false
      })
    }
  },