微信小程序吸顶效果

最新推荐文章于 2024-09-14 21:11:46 发布

就是记不住

最新推荐文章于 2024-09-14 21:11:46 发布

阅读量811

点赞数

分类专栏：微信小程序文章标签：微信小程序吸顶效果

本文链接：https://blog.csdn.net/qq_33030043/article/details/88352233

版权

微信小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏

wxml：

<view class=" {{menuFixed ? 'fixed': ''}}" id="fix">某元素</view>

wxss:

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

js:

data:{
        menuTop:''
    },
onshow:function(){
    var that =this;
    var query = wx.createSelectorQuery()//创建节点查询器 query
        query.select('#fix').boundingClientRect()//选择Id的节点，获取节点位置信息的查询请求
        query.exec(function (res) {
            console.log(res[0].top); // #fix节点的上边界坐标
            that.setData({
                menuTop: res[0].top
            })
        });
    },
/**
 * 监听滚动事件
 */
onPageScroll: function (e) {
    console.log(e);//{scrollTop:99}
    var that = this;
    //当页面滚动距离scrollTop > menuTop某元素距离文档顶部的距离时，某元素固定定位
    if (e.scrollTop > that.data.menuTop) {
        that.setData({
            menuFixed: true
        })
    } else {
        that.setData({
            menuFixed: false
        })
    }
}