Header shrink

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');
    });
  }
});

Ajouter un commentaire

Les champs suivis d'un * sont obligatoires

Les commentaires peuvent être formatés en utilisant la syntaxe Markdown Extra.

Ajouter un rétrolien

URL de rétrolien : https://open-time.net/trackback/14939

Haut de page