吸顶交互逻辑全解析
页面加载 ↓ getRecommendPosition() 获取 recommendTop // 需要吸顶区域 ↓ 用户滚动页面 ↓ handlePageScroll(scrollTop) ↓ ┌─ isFixed = true? ─┐ │ ↓ │ │ ┌─是─┐ ┌─否─┐ │ │ │ │ │ │ │ │ ↓ │ ↓ │ │ │ scrollTop │ scrollTop │ │ < recommendTop-50? │ >= recommendTop? │ │ ↓ │ ↓ │ │ 解吸顶 │ 吸顶 │ │ ↓ │ ↓ │ │ return │ isFixed=true │ │ │ ↓ │ │ │ return │ │ │ │ └─────────┴───────────┘逻辑梳理
一、初始化阶段
页面加载时，通过uni.createSelectorQuery获取分类导航元素（#recommend-section）距离视口顶部的距离，保存到recommendTop变量中。这个值表示分类导航在页面自然状态下的位置
1. 数据定义 (data) // 分类导航吸顶相关 isFixed: false, // 是否固定定位，控制是否吸顶 recommendTop: 0, // 分类导航距离顶部的距离 2. 初始化位置 (onLoad) // 获取分类导航距离顶部的距离，用于吸顶效果 this.$nextTick(() => { this.getRecommendPosition(); }); 3. 获取位置信息 (getRecommendPosition) getRecommendPosition() { // 使用 uni.createSelectorQuery() 获取 #recommend-section 元素距离视口顶部的距离，存入 recommendTop。 const query = uni.createSelectorQuery().in(this); query .select("#recommend-section") .boundingClientRect((data) => { if (data) { this.recommendTop = data.top; // 获取元素距离视口顶部的距离 } }) .exec(); },二、吸顶条件
当页面滚动时，比较当前滚动距离scrollTop与recommendTop的大小。只要scrollTop >= recommendTop，就将isFixed设为true，分类导航固定在搜索栏下方
4. 滚动监听 (onPageScroll → handlePageScroll) onPageScroll(e) { this.handlePageScroll(e.scrollTop); }, handlePageScroll(scrollTop) { // 如果已经吸顶 if (this.isFixed) { // 当滚动回顶部（小于吸顶阈值）时，解除吸顶 if (scrollTop < this.recommendTop - 50) { this.isFixed = false; } return; } // 如果还未吸顶，检查是否需要吸顶 if (!this.recommendTop) return; // 当滚动距离大于等于分类导航的初始位置时，吸顶 if (scrollTop >= this.recommendTop) { this.isFixed = true; } }, 核心逻辑： 吸顶条件：scrollTop >= recommendTop 解除条件：scrollTop < recommendTop - 50（向上滚动50px以上才解除）三、保持吸顶
一旦isFixed变为true，滚动监听函数会直接返回，不再判断是否需要吸顶或解除吸顶。这样做的目的是防止页面内容变化（如切换分类清空列表）导致页面回弹时，吸顶状态被意外取消。
四、解除吸顶
当吸顶状态已激活时，只有用户向上滚动，使scrollTop < recommendTop - 50时，才将isFixed设为false。预留 50px 的缓冲距离，避免频繁切换。
五、切换分类
点击分类时，清空当前列表并加载新数据。如果之前处于吸顶状态，切换完成后会重新获取分类导航的位置，确保吸顶位置准确。由于吸顶后直接返回，列表清空引起的页面回弹不会影响吸顶状态。
// 切换分类处理 (goCategory) goCategory(item) { const wasFixed = this.isFixed; // 保存吸顶状态 this.currentCategoryId = item.id; this.categoryPage = 0; this.categoryHasMore = true; this.categoryInfoList = []; // 清空列表（会导致页面回弹） this.loadCategoryData(); // 如果之前是吸顶状态，切换分类后重新检查 if (wasFixed) { this.$nextTick(() => { this.getRecommendPosition(); }); } }, 问题：清空 categoryInfoList 会导致页面内容减少，触发页面回弹。但由于吸顶后直接 return，所以不会影响 isFixed。六、样式切换
通过isFixed控制类名recommend-fixed，使分类导航从正常文档流切换为position: fixed，并设置合适的top值固定在搜索栏下方。
<view id="recommend-section" class="recommend-section" :class="{ 'recommend-fixed': isFixed }" > .recommend-section.recommend-fixed { position: fixed; top: calc(72rpx + 40rpx); // 固定在搜索栏下方 left: 0; right: 0; z-index: 199; margin: 0; padding: 16rpx 18rpx; background: #fffbf5; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08); }