Adjust scroll position when closing pinned sticky node

src/lib/components/legislation_view/parameters/VariableReferredNodeParameter.svelte

@@ -13,6 +13,7 @@
   import VariableReferredValueParameter from "$lib/components/legislation_view/parameters/VariableReferredValueParameter.svelte"
 
   import type { DisplayMode } from "$lib/displays"
+  import { onMount } from "svelte"
 
   interface Props {
     billParameter: NodeParameter
@@ -43,6 +44,8 @@
   }: Props = $props()
 
   let openChildrenParameters = $state(true)
+  let lawDiv: HTMLDivElement | undefined = $state()
+  let stickyDiv: HTMLDivElement | undefined = $state()
 
   if (isOtherParametersSection) {
     openChildrenParameters = false
@@ -96,12 +99,44 @@
       yield [bothChild, lawChild, revaluationChild, billChild]
     }
   }
+
+  onMount(() => {
+    lawDiv = document.getElementById("law-div")! as HTMLDivElement
+  })
+
+  function isStickyActive() {
+    if (stickyDiv) {
+      const lawHeader = document.getElementById("law-header")!
+      const currentLawheaderBottom = lawHeader.getBoundingClientRect().bottom
+      const stickyDivStyle = window.getComputedStyle(stickyDiv)
+      const stickyDivTop = parseInt(stickyDivStyle.top, 10)
+      const currentStikyDivTop = stickyDiv.getBoundingClientRect().top
+      return currentStikyDivTop - currentLawheaderBottom <= stickyDivTop
+    }
+    return false
+  }
+
+  function showHide() {
+    const stickyWasActive = isStickyActive()
+    openChildrenParameters = !openChildrenParameters
+    if (stickyWasActive && lawDiv !== undefined && stickyDiv !== undefined) {
+      setTimeout(() => {
+        const stickyDivStyle = window.getComputedStyle(stickyDiv!)
+        const stickyDivTop = parseInt(stickyDivStyle.top, 10)
+        const offsetToScroll =
+          stickyDiv!.offsetTop - lawDiv!.offsetTop - stickyDivTop
+
+        lawDiv!.scrollTop = offsetToScroll
+      }, 0)
+    }
+  }
 </script>
 
 <section style="isolation: isolate;">
   {#if depth !== 0}
     {@const top = (depth - 1) * 2}
     <div
+      bind:this={stickyDiv}
       data-depth={depth}
       class="sticky-element flex {depth === 1
         ? ''
@@ -110,7 +145,7 @@
     >
       <button
         aria-label={openChildrenParameters ? "fermer" : "ouvrir"}
-        onclick={() => (openChildrenParameters = !openChildrenParameters)}
+        onclick={showHide}
       >
         <iconify-icon
           class="align-[-0.2rem] text-lg"

src/routes/+page.svelte

@@ -932,7 +932,7 @@
     <div class="flex flex-1 overflow-x-hidden">
       <!-- Panneau de gauche les zones éditables par l'utilisateur (amendement)-->
       <section
-        class="flex min-w-0 flex-[1_0_100%] overflow-y-scroll bg-white shadow-lg transition-transform duration-500 ease-out-quart md:z-10 md:!h-full md:flex-[0_0_33.3%] md:translate-x-0 md:overflow-visible md:!p-0"
+        class="flex min-w-0 flex-[1_0_100%] bg-white shadow-lg transition-transform duration-500 ease-out-quart md:z-10 md:!h-full md:flex-[0_0_33.3%] md:translate-x-0 md:overflow-visible md:!p-0"
         class:-translate-x-full={!mobileLawTab}
         class:!h-[calc(100vh-96px)]={!mobileLawTab}
         class:pb-24={shared.testCasesIndex.length === 1 &&
@@ -942,6 +942,7 @@
         <div class="flex min-h-full w-full flex-col">
           <!-- Header (fixed) -->
           <header
+            id="law-header"
             class="flex w-screen items-center justify-between border-b border-black px-5 pb-2 pt-4 md:w-full md:px-5 2xl:pb-3 2xl:pt-5"
           >
             <!-- Titre -->
@@ -959,6 +960,7 @@
               class="w-screen overflow-y-scroll bg-white px-2 pb-5 md:w-full"
               out:fade={{ duration: 100 }}
               in:fade={{ delay: 150, duration: 150 }}
+              id="law-div"
             >
               <!-- Vue par défaut - choix de dispositifs -->
               {#if displayMode.parametersVariableName === undefined}