小程序-添加粘性布局

// 获取元素位置
const getElementPosition = () => {
    const query = uni.createSelectorQuery()
    
    // 获取顶部栏高度
    query.select('.anchor-title').boundingClientRect()
    // 获取筛选区域位置和高度
    query.select('.filter-section').boundingClientRect()
    
    query.exec(res => {
        // 计算顶部栏高度（包括状态栏和搜索框）
        if (res[0]) {
            topBarHeight.value = res[0].top + 80 // 加上一些边距
        }
        
        // 获取筛选区域的位置
        if (res[1]) {
            filterTop.value = res[1].top
            filterHeight.value = res[1].height
        }
    })
}

// 滚动处理
const handleScroll = (e: any) => {
    const scrollTop = e.detail.scrollTop
    
    // 判断是否吸顶
    if (filterTop.value > 0) {
        const shouldFix = scrollTop >= filterTop.value - topBarHeight.value
        if (isFilterFixed.value !== shouldFix) {
            isFilterFixed.value = shouldFix
        }
    }
}

1. 添加元素占位,

2.添加粘性布局

3. 筛选栏滑动到一定位置后, 变成吸顶的筛选栏,

1. 在筛选框位置添加占位,

2. 写一个单独的定位筛选栏, 页面滚动到一定位置后,展示这个单独的定位栏