collpase animation header if scroll

This commit is contained in:
Ouidade Soussi Chiadmi 2025-07-10 13:47:03 +02:00
parent f0686d8800
commit 94335b8c9c
3 changed files with 73 additions and 9 deletions

View File

@ -122,13 +122,28 @@ document.addEventListener('DOMContentLoaded', function() {
header.classList.add('header--collapsed-already');
// logo.classList.remove('animated');
stopLogoAnimation();
// } else {
// // Sinon, appliquer la transition après un délai
// setTimeout(() => {
// header.classList.add('header--collapsed');
// }, 5000);
// }
} else {
// Sinon, appliquer la transition après un délai
setTimeout(() => {
header.classList.add('header--collapsed');
// Sinon, appliquer la transition après un délai, sauf si scroll
let collapseTimeout = setTimeout(() => {
header.classList.add('header--collapsed');
}, 5000);
}
function interruptCollapseOnScroll() {
if (!header.classList.contains('header--collapsed')) {
clearTimeout(collapseTimeout); // annule l'animation
header.classList.add('header--collapsed');
}
window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
}
window.addEventListener('scroll', interruptCollapseOnScroll);
}
//////////////////////////////////////
let lastScrollTop = 0;
@ -1042,6 +1057,23 @@ $(document).ready(function () {
// /////////// end script ressources ////////////////////////////////
/////////////// start class à view-rows-ressources ////////
$(document).ready(function () {
$(".view-rows-wrapper").each(function () {
let h3Container = $(this).prev("h3").find("div[class^='type-']");
let classToAdd = h3Container.attr("class"); // Récupère la classe complète (ex: "type-Documentation")
if (classToAdd) {
$(this).addClass(classToAdd); // Ajoute cette classe à .view-rows-wrapper
}
});
});
////////////////// end class à view-rows-wrapper ////////////////
})(jQuery, window);

File diff suppressed because one or more lines are too long

View File

@ -64,13 +64,28 @@ document.addEventListener('DOMContentLoaded', function() {
header.classList.add('header--collapsed-already');
// logo.classList.remove('animated');
stopLogoAnimation();
// } else {
// // Sinon, appliquer la transition après un délai
// setTimeout(() => {
// header.classList.add('header--collapsed');
// }, 5000);
// }
} else {
// Sinon, appliquer la transition après un délai
setTimeout(() => {
header.classList.add('header--collapsed');
// Sinon, appliquer la transition après un délai, sauf si scroll
let collapseTimeout = setTimeout(() => {
header.classList.add('header--collapsed');
}, 5000);
}
function interruptCollapseOnScroll() {
if (!header.classList.contains('header--collapsed')) {
clearTimeout(collapseTimeout); // annule l'animation
header.classList.add('header--collapsed');
}
window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
}
window.addEventListener('scroll', interruptCollapseOnScroll);
}
//////////////////////////////////////
let lastScrollTop = 0;
@ -984,6 +999,23 @@ $(document).ready(function () {
// /////////// end script ressources ////////////////////////////////
/////////////// start class à view-rows-ressources ////////
$(document).ready(function () {
$(".view-rows-wrapper").each(function () {
let h3Container = $(this).prev("h3").find("div[class^='type-']");
let classToAdd = h3Container.attr("class"); // Récupère la classe complète (ex: "type-Documentation")
if (classToAdd) {
$(this).addClass(classToAdd); // Ajoute cette classe à .view-rows-wrapper
}
});
});
////////////////// end class à view-rows-wrapper ////////////////
})(jQuery, window);