Antoine/homegrade_theme_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updating chapter indicator heigh depending on relative element

Browse Source
This commit is contained in:
Antoine M 2023-12-04 11:30:27 +01:00
parent 1f6aefe3ed
commit bb00f73621
1 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
resources/js/single-conseil.js
View File

@ -16,9 +16,12 @@ export default function singleConseil() {
}); });
targetBlock.focus({ preventScroll: true }); 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'); let chapterIndicator = document.querySelector('.chapter_index__position-indicator');
chapterIndicator.style.top = targetPosition + 'px'; chapterIndicator.style.top = targetPosition + 'px';
chapterIndicator.style.height = targetHeight + 'px';
} }
let chapterLinks = document.querySelectorAll('.chapter_index__link'); let chapterLinks = document.querySelectorAll('.chapter_index__link');
@ -40,9 +43,9 @@ export default function singleConseil() {
if (entry.isIntersecting) { if (entry.isIntersecting) {
// Add 'active' class if observation target is inside viewport // Add 'active' class if observation target is inside viewport
handleChapterIndicatorPosition(relatedChapterLink);
entry.target.classList.add('active'); entry.target.classList.add('active');
relatedChapterLink.classList.add('active'); relatedChapterLink.classList.add('active');
handleChapterIndicatorPosition(relatedChapterLink.offsetTop);
} else { } else {
// Remove 'active' class otherwise // Remove 'active' class otherwise
// entry.target.classList.remove('active'); // entry.target.classList.remove('active');