Je recommence à jouer un peu avec le thème Ensemble, visible ici, en m’intéressant cette fois à la réduction de l’entête dès qu’on a scrollé un peu le contenu vers le bas.
Cela dit ça même si l’idée est intéressante, surtout sur petit écran, la solution à base de CSS et de Javascript n’est pas satisfaisante vu que ça provoque un effet de flickering quand on arrive au seuil et malgré une tempo de 200ms ça reste encore bien visible :
'use strict';
function sleep(time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
window.addEventListener('scroll', function () {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
sleep(200).then(() => {
document.querySelector('.header').classList.add('shrink');
});
} else {
sleep(200).then(() => {
document.querySelector('.header').classList.remove('shrink');
});
}
});
Je n’ai pour l’instant rien trouvé de convainquant pour régler ça…
Nouvel essai en modifiant légèrement le code :
'use strict';
function sleep(time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
window.addEventListener('scroll', function () {
let header = document.querySelector('.header');
if (window.pageYOffset > 80) {
sleep(200).then(() => {
header.classList.add('shrink');
});
} else {
sleep(200).then(() => {
header.classList.remove('shrink');
});
}
});
1 De Cunégonde -
Ce matin je suis tombée sur le blog de Lapierre. Il est superbe, avec ses petits carrés. Tu veux pas faire un blog photo dans ce style ?
2 De Franck -
Tu me donnes l’URL du blog ?
3 De Cunégonde -
https://www.lapierre.me/index.php/
4 De biou -
Est-ce que l’API Intersection Observer ne pourrait pas t’aider? Niveau perf c’est pas mal ! Sinon tu peux aussi mettre en place un debounce sur ton événement scroll.
5 De Philippe -
@cunégonde : regarde la démo du thème Magalogue par Noé
6 De Cunégonde -
Je vais faire ça mais pas ce soir.
7 De Franck -
Cunégonde forcément je le connaissais :-) Mais c’est loin de ce que j’ai envie de faire, Philippe a raison, Magalog ressemble pas mal à ça.
Merci pour les pistes Biou, je regarderai !