小程序某标签滚动到某个位置时，固定在页面顶部

最新推荐文章于 2024-03-03 14:00:03 发布

草鞋船

最新推荐文章于 2024-03-03 14:00:03 发布

阅读量3.3k

点赞数 2

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/weixin_44558497/article/details/104572426

版权

效果：我不知怎么上传视频效果。。。

方式一：用于要固定的元素前面的内容高度无法确定的情况下

js：代码

说明：这里选的指定元素不是导航栏本身，而是导航栏下面可滚动的内容，因为如果选择导航栏的话，它固定到顶部之后就无法恢复（因为它无法滑动，top值无法改变）。

//监听页面滚动
    onPageScroll:function(e){
        //获取指定元素距离页面顶部的距离
        let query = wx.createSelectorQuery();
        query.select('#nav').boundingClientRect((rect) =>{
            let top = rect.top;
            console.log(top);
            if(top<=45){  //这个45视情况而定
                this.setData({
                    fixedNav:true
                })
            }else{
                this.setData({
                    fixedNav: false
                })