fix(layout): support fix header scroll use new color (ant-design#7071)

* fix: update snapshot * fix: update snapshot * fix: update snapshot * fix(layout): support fix header scroll use new color * fix: update snapshot
fliu2476 · May 15, 2023 · 55f15da · 55f15da
1 parent da29343
commit 55f15da
Show file tree

Hide file tree

Showing 6 changed files with 214 additions and 156 deletions.
diff --git a/packages/layout/src/components/FooterToolbar/index.tsx b/packages/layout/src/components/FooterToolbar/index.tsx
@@ -60,12 +60,10 @@ const FooterToolbar: React.FC<FooterToolbarProps> = (props) => {
   }, [value.collapsed, value.hasSiderMenu, value.isMobile, value.siderWidth]);
 
   const containerDom = useMemo(() => {
+    if (typeof window === undefined || typeof document === undefined)
+      return null;
     // 只读取一次就行了，不然总是的渲染
-    return (
-      getTargetContainer?.() ||
-      document.querySelector(`.${getPrefixCls('pro')}`) ||
-      document.body
-    );
+    return getTargetContainer?.() || document.body;
   }, []);
 
   const stylish = useStylish(`${baseClassName}.${baseClassName}-stylish`, {
@@ -111,7 +109,7 @@ const FooterToolbar: React.FC<FooterToolbarProps> = (props) => {
     </div>
   );
   const ssrDom =
-    !isBrowser() || !portalDom
+    !isBrowser() || !portalDom || !containerDom
       ? renderDom
       : createPortal(renderDom, containerDom, baseClassName);
 

diff --git a/packages/layout/src/components/Header/index.tsx b/packages/layout/src/components/Header/index.tsx
@@ -1,7 +1,7 @@
 import { isNeedOpenHash, ProProvider } from '@ant-design/pro-provider';
 import { ConfigProvider, Layout } from 'antd';
 import classNames from 'classnames';
-import React, { useCallback, useContext } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useStyle } from './style/header';
 import type { WithFalse } from '../../typing';
 import { clearMenuItem } from '../../utils/utils';
@@ -49,6 +49,10 @@ const DefaultHeader: React.FC<HeaderViewProps & PrivateSiderMenuProps> = (
     headerContentRender,
   } = props;
   const { token } = useContext(ProProvider);
+  const context = useContext(ConfigProvider.ConfigContext);
+  const [isFixedHeaderScroll, setIsFixedHeaderScroll] = useState(false);
+  const needFixedHeader = fixedHeader || layout === 'mix';
+
   const renderContent = useCallback(() => {
     const isTop = layout === 'top';
     const clearMenuData = clearMenuItem(props.menuData || []);
@@ -73,8 +77,33 @@ const DefaultHeader: React.FC<HeaderViewProps & PrivateSiderMenuProps> = (
     }
     return defaultDom;
   }, [headerContentRender, headerRender, isMobile, layout, onCollapse, props]);
+  useEffect(() => {
+    const dom = context?.getTargetContainer?.() || document.body;
+    const isFixedHeaderFn = () => {
+      const scrollTop = dom.scrollTop;
 
-  const needFixedHeader = fixedHeader || layout === 'mix';
+      if (
+        scrollTop > (token?.layout?.header?.heightLayoutHeader || 56) &&
+        !scrollTop
+      ) {
+        setIsFixedHeaderScroll(true);
+        return true;
+      }
+      if (scrollTop) {
+        setIsFixedHeaderScroll(false);
+      }
+      return false;
+    };
+
+    if (!needFixedHeader) return;
+    if (typeof window === 'undefined') return;
+    dom.addEventListener('scroll', isFixedHeaderFn, {
+      passive: true,
+    });
+    return () => {
+      dom.removeEventListener('scroll', isFixedHeaderFn);
+    };
+  }, [token?.layout?.header?.heightLayoutHeader, needFixedHeader]);
 
   const isTop = layout === 'top';
   const baseClassName = `${prefixCls}-layout-header`;
@@ -87,6 +116,7 @@ const DefaultHeader: React.FC<HeaderViewProps & PrivateSiderMenuProps> = (
 
   const className = classNames(propsClassName, hashId, baseClassName, {
     [`${baseClassName}-fixed-header`]: needFixedHeader,
+    [`${baseClassName}-fixed-header-scroll`]: isFixedHeaderScroll,
     [`${baseClassName}-mix`]: layout === 'mix',
     [`${baseClassName}-fixed-header-action`]: !collapsed,
     [`${baseClassName}-top-menu`]: isTop,

diff --git a/packages/layout/src/components/Header/style/header.ts b/packages/layout/src/components/Header/style/header.ts
@@ -23,13 +23,20 @@ const genProLayoutHeaderStyle: GenerateStyle<ProLayoutHeaderToken> = (
           token?.layout?.header?.colorBgHeader || 'rgba(255, 255, 255, 0.4)',
         WebkitBackdropFilter: 'blur(8px)',
         backdropFilter: 'blur(8px)',
+        transition:
+          'background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
         '&-fixed-header': {
           position: 'fixed',
           insetBlockStart: 0,
           width: '100%',
           zIndex: 100,
           insetInlineEnd: 0,
         },
+        '&-fixed-header-scroll': {
+          backgroundColor:
+            token?.layout?.header?.colorBgScrollHeader ||
+            'rgba(255, 255, 255, 0.8)',
+        },
         '&-header-actions': {
           display: 'flex',
           alignItems: 'center',