From bb00f73621bf8e59154b8aa911441ee5840ff818 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Mon, 4 Dec 2023 11:30:27 +0100
Subject: [PATCH] updating chapter indicator heigh depending on relative
 element

---
 resources/js/single-conseil.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/resources/js/single-conseil.js b/resources/js/single-conseil.js
index 9d0ddd5..3f46065 100644
--- a/resources/js/single-conseil.js
+++ b/resources/js/single-conseil.js
@@ -16,9 +16,12 @@ export default function singleConseil() {
     });
     targetBlock.focus({ preventScroll: true });
   }
-  function handleChapterIndicatorPosition(targetPosition) {
+  function handleChapterIndicatorPosition(targetLink) {
+    const targetPosition = targetLink.offsetTop;
+    const targetHeight = targetLink.offsetHeight;
     let chapterIndicator = document.querySelector('.chapter_index__position-indicator');
     chapterIndicator.style.top = targetPosition + 'px';
+    chapterIndicator.style.height = targetHeight + 'px';
   }
 
   let chapterLinks = document.querySelectorAll('.chapter_index__link');
@@ -40,9 +43,9 @@ export default function singleConseil() {
 
         if (entry.isIntersecting) {
           // Add 'active' class if observation target is inside viewport
+          handleChapterIndicatorPosition(relatedChapterLink);
           entry.target.classList.add('active');
           relatedChapterLink.classList.add('active');
-          handleChapterIndicatorPosition(relatedChapterLink.offsetTop);
         } else {
           // Remove 'active' class otherwise
           // entry.target.classList.remove('active');