修改搜索栏滚动展示逻辑

src/baseComponents/useHeaderFixed.ts

@@ -7,41 +7,60 @@ import { ref,onMounted, reactive } from "vue";
 export function useHeaderFixed(scrollContainerDom,topHeaderDom,searchBarMinHeight=170,fixedWidth='calc(100% - 640px)',fixedTop='calc(293px + 20px)'){
     const scrollMsg = reactive({
         isScrollTop:false,    //搜索栏是否需要在滚动的时候固定到顶部
-        headerHeight: searchBarMinHeight+'px'  // 滚动时候的 高度占位 值
+        headerHeight: searchBarMinHeight+'px',  // 滚动时候的 高度占位 值 _外部用
+        headerHeightNum:searchBarMinHeight,   // 滚动时候的 高度占位 值_内部用
     })
 
+    // 滚动还原
+    const ScrollRestore = (positionAttr)=>{
+        scrollMsg.isScrollTop = false
+        if(positionAttr !== 'relative'){
+            topHeaderDom.value.style.position = 'relative'
+            topHeaderDom.value.style.width = '100%'
+            topHeaderDom.value.style.top = 'auto'
+            topHeaderDom.value.style.zIndex = '10'
+        }
+    }
+
+    // 置顶滚动
+    const FixedTopScroll = (positionAttr)=>{
+        scrollMsg.isScrollTop = true
+        // 如果当前样式没变，不再重新设置
+        if(positionAttr !== 'fixed'){
+            topHeaderDom.value.style.position = 'fixed'
+            // 两 变量
+            topHeaderDom.value.style.width = fixedWidth
+            topHeaderDom.value.style.top = fixedTop
+            topHeaderDom.value.style.zIndex = '10'
+        }
+    }
+
+
     const HandleDomScroll = (e)=>{
-        console.log('监听到滚动了',e,topHeaderDom)
-
-            let positionAttr = topHeaderDom.value?.style?.position
-            if(e.target.scrollTop >= topHeaderDom.value.clientHeight){   //滚动高度 大于 搜索栏高度的时候 展示搜索浮窗
-
-                if(topHeaderDom.value.clientHeight > searchBarMinHeight){     //搜索栏的最小高度是  searchBarMinHeight
-                    //处于显示浮窗的滚动状态的同时，要保证 默认高度占位不被重置   
-                    // 搜索栏 变成浮动状态后 topHeaderDom.value.clientHeight 会 变小
-                    scrollMsg.headerHeight = topHeaderDom.value.clientHeight + 'px'
-                }
-                scrollMsg.isScrollTop = true
-
-                // 如果当前样式没变，不再重新设置
-                if(positionAttr !== 'fixed'){
-                    topHeaderDom.value.style.position = 'fixed'
-                    // 两 变量
-                    topHeaderDom.value.style.width = fixedWidth
-                    topHeaderDom.value.style.top = fixedTop
-                    topHeaderDom.value.style.zIndex = '10'
-                }
-            }else{
+        // console.log('监听到滚动了',e,topHeaderDom)
+        let positionAttr = topHeaderDom.value?.style?.position
+
+        // 滚动高度 大于 动态变化的 搜索栏高度
+        if(e.target.scrollTop >= topHeaderDom.value.clientHeight){
+            
+            if(topHeaderDom.value.clientHeight > searchBarMinHeight){     //搜索栏的最小高度是  searchBarMinHeight
+                //处于显示浮窗的滚动状态的同时，要保证 默认高度占位不被重置   
+                // 搜索栏 变成浮动状态后 topHeaderDom.value.clientHeight 可能会 变小
                 scrollMsg.headerHeight = topHeaderDom.value.clientHeight + 'px'
+                scrollMsg.headerHeightNum = topHeaderDom.value.clientHeight
+            }
 
-                scrollMsg.isScrollTop = false
-                if(positionAttr !== 'relative'){
-                    topHeaderDom.value.style.position = 'relative'
-                    topHeaderDom.value.style.width = '100%'
-                    topHeaderDom.value.style.top = 'auto'
-                    topHeaderDom.value.style.zIndex = '10'
-                }
+            //同时 要保证滚动高度大于原始搜索栏高度 才浮窗
+            if(e.target.scrollTop >= scrollMsg.headerHeightNum){
+                FixedTopScroll(positionAttr)
+            }else{
+                ScrollRestore(positionAttr)
             }
+        }else{
+            scrollMsg.headerHeight = topHeaderDom.value.clientHeight + 'px'
+            scrollMsg.headerHeightNum = topHeaderDom.value.clientHeight
+            ScrollRestore(positionAttr)
+        }
     }
 
     onMounted(async ()=>{