docs: optimize the experience issues with the top navigation changes …

…during scrolling

 - fix: #203

.dumi/theme/slots/Header/index.tsx

@@ -30,6 +30,7 @@ const useStyle = createStyles(({ token, css }) => {
       display: flex;
       align-items: center;
       justify-content: space-between;
+      transition: padding 0.2s ease-in-out, margin 0.2s ease-in-out, opacity 0.2s ease-in-out;
     `,
     mobile: css`
       height: 48px;
@@ -49,6 +50,9 @@ const useStyle = createStyles(({ token, css }) => {
       inset-inline-end: 50%;
       transform: translateX(50%);
     `,
+    hidden: css`
+      opacity: 0;
+    `,
     mini_rtl: css`
       inset-inline-start: 50%;
     `,
@@ -105,7 +109,7 @@ const Header: React.FC = () => {
 
   const { scrollY, scrollYDirection } = useScrollY();
 
-  const isMini = scrollY > 800 && !isMobile;
+  const isMini = scrollY > window.innerHeight && !isMobile;
 
   const sharedProps: SharedProps = {
     isZhCN: lang === 'cn',
@@ -146,6 +150,8 @@ const Header: React.FC = () => {
     );
   }
 
+  const isHidden = scrollY > window.innerHeight * 1.5 && scrollYDirection === 'down';
+
   return (
     <header
       className={classnames(
@@ -154,10 +160,8 @@ const Header: React.FC = () => {
         (isMobile || isMini) && styles.mobile,
         isMini && styles.mini,
         isMini && direction === 'rtl' && styles.mini_rtl,
+        isHidden && styles.hidden,
       )}
-      style={{
-        display: scrollY > 900 && scrollYDirection === 'down' ? 'none' : 'flex',
-      }}
     >
       <Logo {...sharedProps} />
       {isMobile && (