@orangesk/orange-design-system 2.0.0-beta.41 → 2.0.0-beta.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "2.0.0-beta.41",
+  "version": "2.0.0-beta.43",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -55,7 +55,7 @@
     "@cloudfour/transition-hidden-element": "^2.0.2",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "16.2.2",
+    "@next/mdx": "16.2.4",
     "@orangesk/accessible-autocomplete": "3.2.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.13",
@@ -63,19 +63,19 @@
     "classnames": "^2.5.1",
     "daypickr": "^0.3.4",
     "diff2html": "^3.4.56",
-    "dompurify": "^3.3.3",
-    "html-react-parser": "^5.2.17",
+    "dompurify": "^3.4.0",
+    "html-react-parser": "6.0.1",
     "lorem-ipsum": "^2.0.8",
     "minisearch": "7.2.0",
-    "next": "16.2.2",
+    "next": "16.2.4",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
     "prism-react-renderer": "^2.4.1",
     "query-string": "^9.3.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "react-element-to-jsx-string": "^17.0.1",
-    "react-is": "^19.2.4",
+    "react-is": "^19.2.5",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "remark-gemoji": "^8.0.0",
@@ -99,40 +99,40 @@
     "@rollup/plugin-terser": "1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
-    "@rollup/rollup-darwin-arm64": "^4.60.1",
+    "@rollup/rollup-darwin-arm64": "^4.60.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "25.5.0",
+    "@types/node": "25.6.0",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@types/wnumb": "^1.2.3",
     "@vitejs/plugin-react": "6.0.1",
-    "@vitest/browser": "^4.1.2",
-    "@vitest/browser-playwright": "^4.1.2",
-    "@vitest/coverage-v8": "^4.1.2",
-    "@vitest/ui": "^4.1.2",
+    "@vitest/browser": "^4.1.4",
+    "@vitest/browser-playwright": "^4.1.4",
+    "@vitest/coverage-v8": "^4.1.4",
+    "@vitest/ui": "^4.1.4",
     "canvas": "^3.2.3",
     "fs-extra": "^11.3.4",
     "glob": "13.0.6",
-    "html-validate": "10.11.2",
+    "html-validate": "10.13.1",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
-    "jsdom": "29.0.1",
+    "jsdom": "29.0.2",
     "lint-staged": "16.4.0",
-    "playwright": "^1.59.0",
-    "prettier": "^3.8.1",
-    "rollup": "^4.60.1",
+    "playwright": "^1.59.1",
+    "prettier": "^3.8.3",
+    "rollup": "^4.60.2",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.4.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.98.0",
+    "sass": "^1.99.0",
     "svg-sprite": "^2.0.4",
-    "typescript": "6.0.2",
-    "vitest": "^4.1.2",
+    "typescript": "6.0.3",
+    "vitest": "^4.1.4",
     "vitest-axe": "^0.1.0",
-    "vitest-browser-react": "^2.1.0"
+    "vitest-browser-react": "^2.2.0"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,json,css}": "biome check --write --no-errors-on-unmatched",

package/src/assets/icons/youtube.svg

@@ -1 +1,3 @@
-<svg width="80" height="80" viewbox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><path d="M63.275 30.05S62.8 26.625 61.4 25.1c-1.825-1.975-3.85-2-4.75-2.1-6.7-.5-16.65-.5-16.65-.5s-10 0-16.625.5c-.925.125-2.95.125-4.75 2.1-1.425 1.5-1.9 4.95-1.9 4.95s-.475 4.025-.475 8.05v3.775c0 4.025.475 8.05.475 8.05s.475 3.425 1.875 4.95c1.825 2 4.2 1.925 5.25 2.125 3.8.375 16.15.5 16.15.5s10 0 16.625-.5c.925-.15 2.95-.15 4.75-2.125 1.425-1.5 1.9-4.95 1.9-4.95s.475-4 .475-8.05v-3.75c0-4.05-.475-8.075-.475-8.075ZM36.25 47.5v-15l12.5 7.525-12.5 7.475Z" /></svg>
+<svg viewBox="0 0 80 80" id="youtube">
+  <path xmlns="http://www.w3.org/2000/svg" d="M63.275 30.05S62.8 26.625 61.4 25.1c-1.825-1.975-3.85-2-4.75-2.1-6.7-.5-16.65-.5-16.65-.5s-10 0-16.625.5c-.925.125-2.95.125-4.75 2.1-1.425 1.5-1.9 4.95-1.9 4.95s-.475 4.025-.475 8.05v3.775c0 4.025.475 8.05.475 8.05s.475 3.425 1.875 4.95c1.825 2 4.2 1.925 5.25 2.125 3.8.375 16.15.5 16.15.5s10 0 16.625-.5c.925-.15 2.95-.15 4.75-2.125 1.425-1.5 1.9-4.95 1.9-4.95s.475-4 .475-8.05v-3.75c0-4.05-.475-8.075-.475-8.075ZM36.25 47.5v-15l12.5 7.525-12.5 7.475Z"></path>
+</svg>

package/src/components/AnchorNavigation/AnchorNavigation.static.ts

@@ -1,9 +1,13 @@
 export default class AnchorNavigation {
+  private static readonly MODAL_OPEN_BODY_CLASS = "has-modal";
+  private static readonly STICKY_FLOAT_TOLERANCE = 3;
   private static readonly SCROLLSPY_CENTER_BUFFER = 50;
   private static readonly TOP_SECTION_THRESHOLD = 100;
   private static readonly DRAG_START_THRESHOLD = 6;
   private static readonly SCROLL_END_DEBOUNCE_MS = 150;
   private static readonly SCROLL_EDGE_TOLERANCE = 1;
+  private static readonly SCROLL_ALIGNMENT_TOLERANCE = 1;
+  private static readonly MAX_SCROLL_CORRECTIONS = 2;
 
   private element: HTMLElement;
   private contentLeftElement: HTMLElement | null;
@@ -34,6 +38,23 @@ export default class AnchorNavigation {
   private sections: HTMLElement[] = [];
   private currentPath: string;
   private lastActiveIndex: number = 0;
+  private autoScrollTargetId: string | null = null;
+  private autoScrollCorrectionCount: number = 0;
+  private lastStickyOffset: number = 0;
+  private modalClassObserver: MutationObserver | null = null;
+  private modalStateHandler: () => void;
+  private isForcedFixed: boolean = false;
+  private wasStickyFloating: boolean = false;
+  private forcedFixedTop: number = 0;
+  private forcedFixedLeft: number = 0;
+  private fixedFlowPlaceholder: HTMLDivElement | null = null;
+  private originalInlineStyles: {
+    position: string;
+    top: string;
+    left: string;
+    right: string;
+    width: string;
+  } | null = null;
 
   constructor(element: HTMLElement) {
     this.element = element;
@@ -58,6 +79,7 @@ export default class AnchorNavigation {
     this.horizontalScrollHandler =
       this.updateHorizontalOverflowState.bind(this);
     this.nativeDragStartHandler = this.handleNativeDragStart.bind(this);
+    this.modalStateHandler = this.handleModalStateChange.bind(this);
 
     (this.element as any).ODS_AnchorNavigation = this;
 
@@ -76,15 +98,44 @@ export default class AnchorNavigation {
     return document.querySelector("[data-megamenu]") as HTMLElement | null;
   }
 
+  private getMegamenuOffsetHeight(): number {
+    return this.megamenuElement?.offsetHeight || 0;
+  }
+
   private updateStickyPosition(): void {
+    if (this.isForcedFixed) return;
+
     if (!this.megamenuElement) return;
-    this.element.style.top = `${this.megamenuElement.offsetHeight}px`;
+
+    const stickyOffset = this.getMegamenuOffsetHeight();
+    const hasStickyOffsetChanged = stickyOffset !== this.lastStickyOffset;
+
+    this.lastStickyOffset = stickyOffset;
+    this.element.style.top = `${stickyOffset}px`;
+    this.updateStickyFloatingState();
+
+    if (
+      !hasStickyOffsetChanged ||
+      !this.isAutoScrolling ||
+      !this.autoScrollTargetId ||
+      this.autoScrollCorrectionCount >= AnchorNavigation.MAX_SCROLL_CORRECTIONS
+    ) {
+      return;
+    }
+
+    const targetElement = document.getElementById(this.autoScrollTargetId);
+    if (!targetElement) return;
+
+    // Re-target smoothly as soon as sticky offset changes to avoid a visible snap at scroll end.
+    this.autoScrollCorrectionCount += 1;
+    this.scrollToSection(targetElement, "smooth");
   }
 
   private setupMegamenuObserver(): void {
     this.megamenuElement = this.findMegamenuElement();
 
     if (!this.megamenuElement) {
+      this.lastStickyOffset = 0;
       this.element.style.top = "0px";
       return;
     }
@@ -132,6 +183,7 @@ export default class AnchorNavigation {
     window.addEventListener("resize", this.resizeHandler);
 
     this.initScrollSpy();
+    this.alignInitialHashIfNeeded();
   }
 
   private teardownScrollSpyListeners(): void {
@@ -190,27 +242,129 @@ export default class AnchorNavigation {
     const targetElement = document.getElementById(targetId);
     if (!targetElement) return;
 
-    this.isAutoScrolling = true;
+    this.startAutoScroll(targetId);
     anchor.blur();
 
+    this.scrollToSection(targetElement, "smooth");
+
+    const nextUrl = `${window.location.pathname}${window.location.search}#${targetId}`;
+    window.history.pushState(null, "", nextUrl);
+    this.initScrollSpy(targetId);
+  }
+
+  private getHashSectionId(): string | null {
+    const hash = window.location.hash;
+    if (!hash || hash.length <= 1) return null;
+
+    let hashId = hash.slice(1);
+    try {
+      hashId = decodeURIComponent(hashId);
+    } catch {
+      // Keep raw hash when decoding fails.
+    }
+
+    return hashId || null;
+  }
+
+  private startAutoScroll(sectionId: string): void {
+    this.isAutoScrolling = true;
+    this.autoScrollTargetId = sectionId;
+    this.autoScrollCorrectionCount = 0;
+  }
+
+  private resetAutoScrollState(): void {
+    this.isAutoScrolling = false;
+    this.autoScrollTargetId = null;
+    this.autoScrollCorrectionCount = 0;
+  }
+
+  private tryCorrectAutoScrollAlignment(): boolean {
+    if (!this.autoScrollTargetId) return true;
+
+    const targetElement = document.getElementById(this.autoScrollTargetId);
+    if (!targetElement) return true;
+
+    const targetTop = this.getTargetTop(targetElement);
+    const distance = Math.abs(window.scrollY - targetTop);
+    if (distance <= AnchorNavigation.SCROLL_ALIGNMENT_TOLERANCE) {
+      return true;
+    }
+
+    if (
+      this.autoScrollCorrectionCount >= AnchorNavigation.MAX_SCROLL_CORRECTIONS
+    ) {
+      return true;
+    }
+
+    this.autoScrollCorrectionCount += 1;
+    const correctionBehavior: ScrollBehavior =
+      this.autoScrollCorrectionCount === 1 ? "smooth" : "auto";
+    this.scrollToSection(targetElement, correctionBehavior);
+    return false;
+  }
+
+  private getTotalStickyOffset(): number {
     const scrollOffset = this.megamenuElement
       ? this.megamenuElement.offsetHeight
       : 0;
-    const additionalOffset = this.element.offsetHeight;
+    const anchorNavOffset = this.element.offsetHeight;
+    return scrollOffset + anchorNavOffset;
+  }
+
+  private getConfiguredScrollPaddingTop(): number {
+    const rootStyles = window.getComputedStyle(document.documentElement);
+    const rawScrollPaddingTop = rootStyles.scrollPaddingTop;
+    const parsedScrollPaddingTop = Number.parseFloat(rawScrollPaddingTop);
+
+    if (Number.isFinite(parsedScrollPaddingTop) && parsedScrollPaddingTop > 0) {
+      return parsedScrollPaddingTop;
+    }
+
+    return 0;
+  }
+
+  private getEffectiveScrollOffset(): number {
+    const configuredScrollPaddingTop = this.getConfiguredScrollPaddingTop();
+    if (configuredScrollPaddingTop > 0) {
+      return configuredScrollPaddingTop;
+    }
+
+    return this.getTotalStickyOffset();
+  }
+
+  private getTargetTop(targetElement: HTMLElement): number {
     const targetTop =
       targetElement.getBoundingClientRect().top +
       window.scrollY -
-      scrollOffset -
-      additionalOffset;
+      this.getEffectiveScrollOffset();
+    return Math.max(0, targetTop);
+  }
 
+  private scrollToSection(
+    targetElement: HTMLElement,
+    behavior: ScrollBehavior,
+  ): void {
     window.scrollTo({
-      top: Math.max(0, targetTop),
-      behavior: "smooth",
+      top: this.getTargetTop(targetElement),
+      behavior,
     });
+  }
 
-    const nextUrl = `${window.location.pathname}${window.location.search}#${targetId}`;
-    window.history.pushState(null, "", nextUrl);
-    this.initScrollSpy(targetId);
+  private alignInitialHashIfNeeded(): void {
+    const hashId = this.getHashSectionId();
+    if (!hashId) return;
+
+    const targetElement = document.getElementById(hashId);
+    if (!targetElement) return;
+
+    this.startAutoScroll(hashId);
+
+    requestAnimationFrame(() => {
+      this.scrollToSection(targetElement, "auto");
+      requestAnimationFrame(() => {
+        this.handleScrollEnd();
+      });
+    });
   }
 
   private initScrollSpy(forcedSectionId: string | null = null): void {
@@ -231,12 +385,7 @@ export default class AnchorNavigation {
         );
       }
     } else {
-      // Calculate scroll offset from megamenu height and anchor nav height
-      const scrollOffset = this.megamenuElement
-        ? this.megamenuElement.offsetHeight
-        : 0;
-      const anchorNavOffset = this.element.offsetHeight;
-      const totalOffset = scrollOffset + anchorNavOffset;
+      const totalOffset = this.getEffectiveScrollOffset();
       const effectiveCenter =
         window.scrollY + totalOffset + AnchorNavigation.SCROLLSPY_CENTER_BUFFER;
 
@@ -323,37 +472,15 @@ export default class AnchorNavigation {
       0,
       contentLeft.scrollWidth - contentLeft.clientWidth,
     );
-    const navLinks = this.navLinks;
-    let firstNavLink: HTMLAnchorElement | null = null;
-    let lastNavLink: HTMLAnchorElement | null = null;
-
-    if (navLinks && navLinks.length > 0) {
-      firstNavLink = navLinks[0];
-      lastNavLink = navLinks[navLinks.length - 1];
-    }
-
-    const isFirstItem = activeLink === firstNavLink;
-    const isLastItem = activeLink === lastNavLink;
-
-    let targetScrollLeft: number | null = null;
-    if (isFirstItem) {
-      targetScrollLeft = 0;
-    } else if (isLastItem) {
-      targetScrollLeft = maxScrollLeft;
-    }
-
-    const itemLeft = activeLink.offsetLeft;
-    const itemRight = itemLeft + activeLink.clientWidth;
-    const viewportLeft = contentLeft.scrollLeft;
-    const viewportRight = viewportLeft + contentLeft.clientWidth;
-    const isVisible = itemLeft >= viewportLeft && itemRight <= viewportRight;
-
-    if (targetScrollLeft === null && !forceCenter && isVisible) return;
-
-    if (targetScrollLeft === null) {
-      targetScrollLeft =
-        itemLeft - contentLeft.clientWidth / 2 + activeLink.clientWidth / 2;
-    }
+    const contentRect = contentLeft.getBoundingClientRect();
+    const itemRect = activeLink.getBoundingClientRect();
+    const itemCenterWithinContent =
+      itemRect.left -
+      contentRect.left +
+      contentLeft.scrollLeft +
+      itemRect.width / 2;
+    const targetScrollLeft =
+      itemCenterWithinContent - contentLeft.clientWidth / 2;
 
     const behavior = window.innerWidth < 768 ? "auto" : "smooth";
     const nextScrollLeft = Math.min(
@@ -361,6 +488,11 @@ export default class AnchorNavigation {
       Math.max(0, targetScrollLeft),
     );
 
+    const isAlreadyAligned =
+      Math.abs(contentLeft.scrollLeft - nextScrollLeft) <=
+      AnchorNavigation.SCROLL_ALIGNMENT_TOLERANCE;
+    if (!forceCenter && isAlreadyAligned) return;
+
     if (typeof contentLeft.scrollTo === "function") {
       contentLeft.scrollTo({
         left: nextScrollLeft,
@@ -559,11 +691,198 @@ export default class AnchorNavigation {
   }
 
   private handleResize(): void {
+    if (this.isForcedFixed) {
+      const parentRect = this.element.parentElement?.getBoundingClientRect();
+      const megamenuHeight = this.getMegamenuOffsetHeight();
+
+      if (parentRect) {
+        this.forcedFixedLeft = Math.round(parentRect.left);
+        this.element.style.width = `${Math.round(parentRect.width)}px`;
+      }
+
+      if (megamenuHeight > 0) {
+        this.forcedFixedTop = megamenuHeight;
+      }
+
+      this.element.style.top = `${this.forcedFixedTop}px`;
+      this.element.style.left = `${this.forcedFixedLeft}px`;
+
+      if (this.fixedFlowPlaceholder) {
+        this.fixedFlowPlaceholder.style.height = `${this.element.offsetHeight}px`;
+      }
+    } else {
+      this.updateStickyFloatingState();
+    }
+
     this.initScrollSpy();
     this.updateDragState();
     this.updateHorizontalOverflowState();
   }
 
+  private isAnyModalOpen(): boolean {
+    return document.body.classList.contains(
+      AnchorNavigation.MODAL_OPEN_BODY_CLASS,
+    );
+  }
+
+  private isCurrentlyStickyFloating(): boolean {
+    if (!this.megamenuElement) return false;
+
+    const stickyTop = this.getMegamenuOffsetHeight();
+    const currentTop = this.element.getBoundingClientRect().top;
+
+    return currentTop <= stickyTop + AnchorNavigation.STICKY_FLOAT_TOLERANCE;
+  }
+
+  private updateStickyFloatingState(): void {
+    if (this.isAnyModalOpen() || this.isForcedFixed) {
+      return;
+    }
+
+    this.wasStickyFloating = this.isCurrentlyStickyFloating();
+  }
+
+  private ensureFixedFlowPlaceholder(): void {
+    if (!this.fixedFlowPlaceholder) {
+      this.fixedFlowPlaceholder = document.createElement("div");
+      this.fixedFlowPlaceholder.setAttribute("aria-hidden", "true");
+      this.fixedFlowPlaceholder.style.width = "100%";
+      this.fixedFlowPlaceholder.style.pointerEvents = "none";
+      this.fixedFlowPlaceholder.style.visibility = "hidden";
+      this.element.insertAdjacentElement("afterend", this.fixedFlowPlaceholder);
+    }
+
+    this.fixedFlowPlaceholder.style.height = `${this.element.offsetHeight}px`;
+  }
+
+  private removeFixedFlowPlaceholder(): void {
+    if (!this.fixedFlowPlaceholder) return;
+
+    this.fixedFlowPlaceholder.remove();
+    this.fixedFlowPlaceholder = null;
+  }
+
+  private applyFixedPosition(): void {
+    if (this.isForcedFixed) return;
+
+    const rect = this.element.getBoundingClientRect();
+    const parentRect = this.element.parentElement?.getBoundingClientRect();
+    const megamenuHeight = this.getMegamenuOffsetHeight();
+
+    this.originalInlineStyles = {
+      position: this.element.style.position,
+      top: this.element.style.top,
+      left: this.element.style.left,
+      right: this.element.style.right,
+      width: this.element.style.width,
+    };
+
+    this.forcedFixedTop =
+      megamenuHeight > 0 ? megamenuHeight : Math.max(0, Math.round(rect.top));
+    this.forcedFixedLeft = Math.max(
+      0,
+      Math.round(parentRect?.left ?? rect.left),
+    );
+    const fixedWidth = Math.round(parentRect?.width ?? rect.width);
+
+    this.element.style.position = "fixed";
+    this.element.style.top = `${this.forcedFixedTop}px`;
+    this.element.style.left = `${this.forcedFixedLeft}px`;
+    this.element.style.right = "";
+    this.element.style.width = `${fixedWidth}px`;
+    this.ensureFixedFlowPlaceholder();
+
+    this.isForcedFixed = true;
+  }
+
+  private restoreStickyPosition(shouldRecalculate: boolean = true): void {
+    if (!this.isForcedFixed) return;
+
+    const originalStyles = this.originalInlineStyles;
+    this.element.style.position = originalStyles?.position || "";
+    this.element.style.top = originalStyles?.top || "";
+    this.element.style.left = originalStyles?.left || "";
+    this.element.style.right = originalStyles?.right || "";
+    this.element.style.width = originalStyles?.width || "";
+    this.resetFixedPositionState();
+
+    if (shouldRecalculate) {
+      this.updateStickyPosition();
+      this.initScrollSpy();
+    }
+  }
+
+  private handleModalStateChange(): void {
+    if (this.isAnyModalOpen()) {
+      // Keep sticky in normal flow until it is actually pinned.
+      if (this.isForcedFixed || this.wasStickyFloating) {
+        this.applyFixedPosition();
+      }
+      return;
+    }
+
+    this.restoreStickyPosition(false);
+    this.updateStickyFloatingState();
+  }
+
+  private setupModalObserver(): void {
+    this.updateStickyFloatingState();
+    this.handleModalStateChange();
+
+    if (!document.body || typeof MutationObserver === "undefined") {
+      return;
+    }
+
+    this.modalClassObserver = new MutationObserver(this.modalStateHandler);
+    this.modalClassObserver.observe(document.body, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+  }
+
+  private teardownModalObserver(): void {
+    if (!this.modalClassObserver) return;
+
+    this.modalClassObserver.disconnect();
+    this.modalClassObserver = null;
+  }
+
+  private teardownMegamenuObserver(): void {
+    window.removeEventListener("scroll", this.scrollHandler);
+
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+  }
+
+  private clearAutoScrollTimers(): void {
+    if (this.scrollTimeout) {
+      clearTimeout(this.scrollTimeout);
+      this.scrollTimeout = null;
+    }
+  }
+
+  private resetFixedPositionState(): void {
+    this.originalInlineStyles = null;
+    this.isForcedFixed = false;
+    this.wasStickyFloating = false;
+    this.forcedFixedTop = 0;
+    this.forcedFixedLeft = 0;
+    this.removeFixedFlowPlaceholder();
+  }
+
+  private resetNavigationState(): void {
+    this.megamenuElement = null;
+    this.lastStickyOffset = 0;
+    this.navLinks = null;
+    this.sections = [];
+    this.lastActiveIndex = 0;
+    this.autoScrollTargetId = null;
+    this.autoScrollCorrectionCount = 0;
+    this.resetFixedPositionState();
+  }
+
   private handleScrollSpy(): void {
     if (this.isAutoScrolling) {
       // Clear existing timeout and set a new one
@@ -573,9 +892,7 @@ export default class AnchorNavigation {
 
       // Set a timeout to detect when scrolling has ended
       this.scrollTimeout = setTimeout(() => {
-        this.isAutoScrolling = false;
-        this.scrollTimeout = null;
-        this.initScrollSpy();
+        this.handleScrollEnd();
       }, AnchorNavigation.SCROLL_END_DEBOUNCE_MS);
     } else {
       this.initScrollSpy();
@@ -587,7 +904,12 @@ export default class AnchorNavigation {
       clearTimeout(this.scrollTimeout);
       this.scrollTimeout = null;
     }
-    this.isAutoScrolling = false;
+
+    if (!this.tryCorrectAutoScrollAlignment()) {
+      return;
+    }
+
+    this.resetAutoScrollState();
     this.initScrollSpy();
   }
 
@@ -595,50 +917,36 @@ export default class AnchorNavigation {
     this.setupMegamenuObserver();
     this.setupScrollSpy();
     this.setupDragScroll();
+    this.setupModalObserver();
   }
 
   destroy(): void {
-    if (this.scrollTimeout) {
-      clearTimeout(this.scrollTimeout);
-      this.scrollTimeout = null;
-    }
+    this.clearAutoScrollTimers();
 
-    window.removeEventListener("scroll", this.scrollHandler);
+    this.teardownMegamenuObserver();
     this.teardownScrollSpyListeners();
     this.teardownDragScroll();
 
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = null;
-    }
+    this.teardownModalObserver();
+
+    this.restoreStickyPosition(false);
 
     this.element.style.top = "";
-    this.megamenuElement = null;
-    this.navLinks = null;
-    this.sections = [];
-    this.lastActiveIndex = 0;
+    this.resetNavigationState();
     (this.element as any).ODS_AnchorNavigation = null;
   }
 
   update(): void {
-    if (this.scrollTimeout) {
-      clearTimeout(this.scrollTimeout);
-      this.scrollTimeout = null;
-    }
+    this.clearAutoScrollTimers();
 
-    window.removeEventListener("scroll", this.scrollHandler);
+    this.teardownMegamenuObserver();
     this.teardownScrollSpyListeners();
     this.teardownDragScroll();
 
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = null;
-    }
+    this.teardownModalObserver();
 
-    this.megamenuElement = null;
-    this.navLinks = null;
-    this.sections = [];
-    this.lastActiveIndex = 0;
+    this.restoreStickyPosition(false);
+    this.resetNavigationState();
 
     this.init();
   }