@salesforcedevs/docs-components 1.3.300-scroll-fix-alpha3 → 1.3.300-scroll-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.300-scroll-fix-alpha3",
+    "version": "1.3.300-scroll-alpha1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/content/content.css

@@ -385,6 +385,7 @@ mark {
 /* offset page jump link due to fixed header */
 [id] {
     scroll-margin-top: calc(
-        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
+            var(--dx-g-spacing-2xl)
     );
 }

package/src/modules/doc/contentLayout/contentLayout.css

@@ -43,7 +43,8 @@ dx-toc {
 /* offset page jump link due to fixed header */
 ::slotted(doc-heading) {
     scroll-margin-top: calc(
-        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
+            var(--dx-g-spacing-2xl)
     );
 }
 

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -231,14 +231,6 @@ export default class ContentLayout extends LightningElement {
                 (globalNavEl.getBoundingClientRect().height !== 72 ? 0 : 72) +
                 contextNavEl.getBoundingClientRect().height;
             const docHeaderHeight = docHeaderEl.getBoundingClientRect().height;
-            const totalHeaderHeight = globalNavHeight + docHeaderHeight;
-
-            // Selecting the doc section heading and RNB here.
-            const docHeadingEls = Array.from(
-                document.querySelectorAll("doc-heading")
-            );
-            const rightNavBarEl = this.template.querySelector(".right-nav-bar");
-
             sidebarEl.style.setProperty(
                 "--dx-c-content-sidebar-sticky-top",
                 `${globalNavHeight + docHeaderHeight}px`
@@ -249,26 +241,6 @@ export default class ContentLayout extends LightningElement {
                 `${globalNavHeight}px`
             );
 
-            // Adjusting the doc section heading on scroll.
-            docHeadingEls.forEach((docHeadingEl) => {
-                (docHeadingEl as any).style.scrollMarginTop = docPhaseEl
-                    ? `${
-                          totalHeaderHeight +
-                          docPhaseEl.getBoundingClientRect().height
-                      }px`
-                    : `${totalHeaderHeight + 30}px`;
-            });
-
-            // Adjusting the right nav bar on scroll.
-            if (rightNavBarEl) {
-                rightNavBarEl.style.top = docPhaseEl
-                    ? `${
-                          totalHeaderHeight +
-                          docPhaseEl.getBoundingClientRect().height
-                      }px`
-                    : `${totalHeaderHeight}px`;
-            }
-
             // If doc phase element exists, we need to account for its sticky position. Mobile should include the sidebar height (since it becomes sticky aswell).
             if (docPhaseEl) {
                 docPhaseEl.style.setProperty(
@@ -281,6 +253,31 @@ export default class ContentLayout extends LightningElement {
                             : globalNavHeight + docHeaderHeight
                     }px`
                 );
+
+                // Adjust scroll margin for doc headings when doc phase is present
+                const docHeadingEls = Array.from(
+                    document.querySelectorAll("doc-heading")
+                );
+                docHeadingEls.forEach((docHeadingEl) => {
+                    (docHeadingEl as any).style.scrollMarginTop = `${
+                        globalNavHeight +
+                        docHeaderHeight +
+                        docPhaseEl.getBoundingClientRect().height +
+                        40
+                    }px`;
+                });
+
+                // Adjust right nav bar position when doc phase is present
+                const rightNavBarEl =
+                    this.template.querySelector(".right-nav-bar");
+
+                if (rightNavBarEl) {
+                    rightNavBarEl.style.top = `${
+                        globalNavHeight +
+                        docHeaderHeight +
+                        docPhaseEl.getBoundingClientRect().height
+                    }px`;
+                }
             }
         });
     };