1

package1/group/groupBuySingle.vue

@@ -91,7 +91,9 @@
 				</swiper>
 			</view>
 			<!-- 分类栏：移到goods-list外层，position:sticky才能生效 -->
-			<view class="container" style="display: flex;height: 72%;margin-top: 20rpx;">
+			<!-- 占位元素：当container吸顶时保持页面高度不塌缩 -->
+			<view v-if="isContainerSticky" :style="'height:' + containerHeight + 'px;margin-top:20rpx;'"></view>
+			<view class="container" :style="containerStyle">
 				<scroll-view scroll-y id="menuList" style="border-right: 1px solid #eee;font-weight: 700;font-size: 28rpx;height: 100%;width: 160rpx;">
 					<view class="menu1" @tap="checkTab(index)" v-for="(item,index) in menuList" :key="index"
 						:style="{'border-top-right-radius':item.checked?'20rpx':'','border-bottom-right-radius':item.checked?'20rpx':'','color':item.checked?'rgba(0, 35, 28, 1)':'#777','background':item.checked?'#fff':''}">
@@ -582,6 +584,8 @@
 				scrollIntoViewId: '',
 				goodsListScrollTop: 0,
 				isAutoScrolling: false,
+				isContainerSticky: false,
+				containerHeight: 0,
 				pageScrollTop: 0,
 				searchForm: {
 					shopId: '',
@@ -619,6 +623,17 @@
 			},
 			cartTotalPrice() {
 				return this.cartItems.reduce((acc, curr) => acc + (curr.quantity * curr.price), 0).toFixed(2);
+			},
+			containerStyle() {
+				if (this.isContainerSticky) {
+					// 吸顶时：fixed定位，精确计算高度 = 屏幕高度 - 导航栏高度 - 底部栏高度
+					const sysInfo = uni.getSystemInfoSync();
+					const bottomBarPx = Math.round(80 * sysInfo.windowWidth / 375);
+					const h = sysInfo.windowHeight - this.navBarHeight - bottomBarPx;
+					return 'display:flex;position:fixed;left:0;top:' + this.navBarHeight + 'px;width:100%;height:' + h + 'px;z-index:50;background:#F5F8F5;padding:0 2.5%;box-sizing:border-box;';
+				} else {
+					return 'display:flex;height:72%;margin-top:20rpx;';
+				}
 			}
 		},
 		filters: {
@@ -707,16 +722,24 @@
 					if (rect) {
 						this.containerOriginalTop = rect.top;
 						this.menuListOffsetTop = rect.top;
+						this.containerHeight = rect.height;
 					}
 				}).exec();
 			}, 500);
 		},
 		onPageScroll(e) {
 			this.lastScrollTop = e.scrollTop;
-			console.log(e.scrollTop)
 			// 当页面滚动到container应该触顶的位置时，启用吸顶
 			const stickyThreshold = this.containerOriginalTop - this.navBarHeight;
-			
+			if (e.scrollTop >= stickyThreshold && stickyThreshold > 0) {
+				if (!this.isContainerSticky) {
+					this.isContainerSticky = true;
+				}
+			} else {
+				if (this.isContainerSticky) {
+					this.isContainerSticky = false;
+				}
+			}
 		},
 		methods: {
 			// 页面touchmove事件：吸顶后阻止页面整体滑动（让goods-list接管滚动）
@@ -1821,16 +1844,7 @@
 		border-radius: 20rpx;
 	}
 
-	.container-sticky {
+
-		position: fixed;
-		left: 0;
-		width: 100%;
-		z-index: 50;
-		height: calc(100vh - 160rpx);
-		background: #F5F8F5;
-		padding: 0 2.5%;
-		box-sizing: border-box;
-	}
 
 	.goods-top {
 		padding: 20rpx;