fix: scroll position of header (#600)

Author: shhdgit

src/components/Navigation/RightNav.tsx

@@ -33,10 +33,18 @@ interface RightNavProps {
   filePath: string;
   buildType?: BuildType;
   pageUrl?: string;
+  bannerVisible?: boolean;
 }
 
 export default function RightNav(props: RightNavProps) {
-  const { toc = [], pathConfig, filePath, buildType, pageUrl } = props;
+  const {
+    toc = [],
+    pathConfig,
+    filePath,
+    buildType,
+    pageUrl,
+    bannerVisible,
+  } = props;
 
   const theme = useTheme();
   const { language, t } = useI18next();
@@ -67,9 +75,11 @@ export default function RightNav(props: RightNavProps) {
       <Box
         sx={{
           position: "sticky",
-          top: "5rem",
+          top: bannerVisible ? "7.5rem" : "5rem",
           height: "100%",
-          maxHeight: "calc(100vh - 5rem)",
+          maxHeight: bannerVisible
+            ? "calc(100vh - 7.5rem)"
+            : "calc(100vh - 5rem)",
           overflowY: "auto",
           padding: "36px 16px",
           display: "flex",

src/styles/typographyDefine.css

@@ -74,3 +74,12 @@ h5,
 h6 {
   scroll-margin-top: 5rem;
 }
+
+.doc-feature-banner h1,
+.doc-feature-banner h2,
+.doc-feature-banner h3,
+.doc-feature-banner h4,
+.doc-feature-banner h5,
+.doc-feature-banner h6 {
+  scroll-margin-top: 7.5rem;
+}

src/templates/DocTemplate.tsx

@@ -147,7 +147,9 @@ export default function DocTemplate({
       />
       <Box
         sx={{ marginTop: bannerVisible ? "7.5rem" : "5rem", display: "flex" }}
-        className={clsx("PingCAP-Doc")}
+        className={clsx("PingCAP-Doc", {
+          "doc-feature-banner": bannerVisible,
+        })}
       >
         <Box sx={{ display: "flex", width: "100%" }}>
           {!frontmatter?.hide_leftNav && (
@@ -248,6 +250,7 @@ export default function DocTemplate({
                         filePath={filePath}
                         buildType={buildType}
                         pageUrl={pageUrl}
+                        bannerVisible={bannerVisible}
                       />
                     </Box>
                     <Box