refactor(v2): use transform instead of top position for hideable navbar (#4194)

* refactor(v2): use translateY instead of top to hide navbar

* Use translate3d instead of translateY

Author: lex111

packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css

@@ -18,9 +18,10 @@
 }
 
 .navbarHideable {
-  transition: top 0.2s ease-in-out;
+  transform: translate3d(0, 0, 0);
+  transition: transform var(--ifm-transition-fast) ease;
 }
 
 .navbarHidden {
-  top: calc(var(--ifm-navbar-height) * -1) !important;
+  transform: translate3d(0, calc(var(--ifm-navbar-height) * -1), 0);
 }

packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.ts

@@ -12,7 +12,7 @@ import type {useHideableNavbarReturns} from '@theme/hooks/useHideableNavbar';
 
 const useHideableNavbar = (hideOnScroll: boolean): useHideableNavbarReturns => {
   const location = useLocation();
-  const [isNavbarVisible, setIsNavbarVisible] = useState(!hideOnScroll);
+  const [isNavbarVisible, setIsNavbarVisible] = useState(hideOnScroll);
   const isFocusedAnchor = useRef(false);
   const [lastScrollTop, setLastScrollTop] = useState(0);
   const [navbarHeight, setNavbarHeight] = useState(0);