diff --git a/pages/index/index.js b/pages/index/index.js
index 9be6c95..4a0aa4f 100644
--- a/pages/index/index.js
+++ b/pages/index/index.js
@@ -25,6 +25,8 @@ Page({
     searchSectionVisible: true,
     lastScrollTop: 0,
     isScrollLocked: false,
+    searchSectionOpacity: 1,
+    searchSectionTransform: 0,
     isSearchBarFullyHidden: false,
     
     // 回到顶部按钮
@@ -824,22 +826,33 @@ Page({
   onScroll: function(e) {
     const { scrollTop } = e.detail;
     
-    // 只控制搜索区域的完全显示/隐藏状态，不再使用内联样式控制过渡
-    // 所有过渡效果通过CSS类统一控制
+    let searchSectionOpacity = 1;
+    let searchSectionTransform = 0;
     let isSearchBarFullyHidden = false;
     
-    if (scrollTop > 200) {
-      // 当滚动距离超过200rpx时，完全隐藏搜索区域
-      isSearchBarFullyHidden = true;
+    if (scrollTop > 50) {
+      // 当滚动距离超过50rpx时，开始逐渐隐藏
+      const hideProgress = Math.min((scrollTop - 50) / 150, 1); // 0-1的隐藏进度，延长隐藏过程
+      searchSectionOpacity = 1 - hideProgress;
+      searchSectionTransform = -20 * hideProgress;
+      
+      // 当隐藏进度达到100%时，添加完全隐藏类
+      if (hideProgress >= 1) {
+        isSearchBarFullyHidden = true;
+      }
     }
     
-    // 当滚动回到顶部时，显示搜索区域
-    if (scrollTop <= 150) {
+    // 当滚动回到顶部时，重置所有状态
+    if (scrollTop <= 50) {
+      searchSectionOpacity = 1;
+      searchSectionTransform = 0;
       isSearchBarFullyHidden = false;
     }
     
-    // 更新搜索框状态
+    // 更新搜索框状态和样式
     this.setData({
+      searchSectionOpacity: searchSectionOpacity,
+      searchSectionTransform: searchSectionTransform,
       isSearchBarFullyHidden: isSearchBarFullyHidden,
       lastScrollTop: scrollTop
     });
diff --git a/pages/index/index.wxml b/pages/index/index.wxml
index 957e915..591b201 100644
--- a/pages/index/index.wxml
+++ b/pages/index/index.wxml
@@ -4,10 +4,10 @@
     class="top-section {{isSearchBarFullyHidden ? 'top-hidden' : ''}}"
   >
     <!-- 标题 -->
-    <view class="title">专业的鸡蛋交易平台</view>
+    <view class="title" style="opacity: {{searchSectionOpacity}}; transform: translateY({{searchSectionTransform}}rpx);">专业的鸡蛋交易平台</view>
     
     <!-- 搜索区域 -->
-    <view class="search-section">
+    <view class="search-section" style="opacity: {{searchSectionOpacity}}; transform: translateY({{searchSectionTransform}}rpx);">
       <view class="search-bar">
         <view class="search-input-wrapper">
           <!-- 将地区选择器放在最左边 -->
diff --git a/pages/index/index.wxss b/pages/index/index.wxss
index 7d15749..1acdb13 100644
--- a/pages/index/index.wxss
+++ b/pages/index/index.wxss
@@ -26,11 +26,10 @@ page {
   margin-bottom: 20rpx;
   overflow: hidden;
   transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-  will-change: opacity, transform, height;
+  will-change: opacity, transform, max-height, margin;
   max-height: 200rpx;
   opacity: 1;
   transform: translateY(0);
-  height: auto;
 }
 
 /* 顶部搜索区域完全隐藏状态 - 用于平滑收缩高度 */
@@ -40,8 +39,7 @@ page {
   margin-bottom: 0;
   pointer-events: none;
   opacity: 0;
-  transform: translateY(-50rpx);
-  height: 0;
+  transform: translateY(-20rpx);
 }
 
 /* 标题样式 */