Animation au scroll

Bonjour à tous,

J'aimerai pouvoir déclencher un ensemble d'animation et modification css au scroll.
Quelque chose de classique puisque celà consiste principalement à une modification du header de la page (Passage en position:fixe, Disparition du logo, Reduction de la font, …)

Pour celà quelle est la méthode la plus performante?

Sachant que ceci sera appliqué sur deux sections du site.
L'une comprenant Jquery pas l'autre.

Je suis embêté car :
- d'un coté ajouter Jquery juste pour celà ne me parait parait pas un bon choix stratégique en terme de performance
- D'un autre coté ajouter à l'autre section ( window.addEventListener("scroll", […]) ) me parais aussi désastreux en terme de performance.

Auriez vous quelques suggestion, recommandation?

Bonjour,

jQuery c'est quantité négligeable. Ce qui rend lourd un site aujourd'hui c'est d'avoir trop de requêtes http. Aussi il ne faut pas oublier que les scripts sont mis en cache par le navigateur donc si tu le charges pour l'un des parties de ton site il le sera déjà là pour l'autre.

Si tu as une quantité raisonnable de css ou js, le plus simple pour optimiser c'est de concaténer et éventuellement minifier tes fichiers en 1 seul puis tu inclus les mêmes fichiers sur toutes les pages. Ainsi c'est chargé une fois pour toute avec le minimum de bande passante et de requêtes http.

@bacasable
Merci pour ta réponse.

Effectivement je suis relativement d'accord, Néanmoins:
- J'ai du mal à considérer 100Ko de Jquery comme négligeable
Ensuite, mes sections de sites sont:
- 1 prestashop embarquant un ensemble de JS (dont JQuery) tous concatenés en 1 fichier
- 1 Wp sans JQuery

Partant de là, les deux sections ne peuvent partager le JQuery en cache.

Mais surtout au final, en terme de perf (traitement navigateur), est il meilleur d'utiliser JQuery pour controller le scroll qu'un addEventListener("scroll",[…]) quitte à ajouter un SetIntervall?

a écrit :
- D'un autre coté ajouter à l'autre section ( window.addEventListener("scroll", […]) ) me parais aussi désastreux en terme de performance.

Alors ne le fait pas? Enfin je veux dire, avec jQuery c'est très exactement ce qui se passe.
écouter le scroll c'est lourd, et pas plus léger avec jQuery.

Sinon en terme de poids et de pression mémoire écrire un petit script compatible des deux côtés avec window.addEventListener ne me parait pas bien lourd.

Et l'eau,

gotcha5832 a écrit :

... quitte à ajouter un SetIntervall?

la chose à ne pas faire sur une écoute d'un scroll ! c'est le mur assuré (chaque fois que l'utilisateur scroll, ça lance un setInterval).

Regarde du côté de IntersectionObserver (si tu veux faire quelques chose de simple et que tu n'as pas la contrainte du crossbrowser.

La meilleur manière étant de le faire soit même à l'objet (observer pattern, je t'aime) ou pas.
Modifié par niuxe (08 Jan 2020 - 00:33)

gotcha5832 a écrit :

- J'ai du mal à considérer 100Ko de Jquery comme négligeable

Sais-tu que :
- avec gzip tu n'auras plus qu'un tiers du poids de ton js
- qu'avec les connexions actuelles le temps de téléchargement d'un tel fichier sera de toute façon plus court que le temps nécessaire pour effectuer la requête http

donc si tu regardes le temps total de chargement d'une page tes 100ko de jQuery sont absolument négligeable. Pour moi c'est 87ms dont 17ms pour le téléchargement du fichier lui même.

bref pose-toi la question de si tu as envie d'utiliser jQuery ou non mais ne cherche pas une quelconque optimisation derrière le fait de ne pas l'utiliser car il n'y en a aucune autre que d'enlever une requête http.

niuxe a écrit :
la chose à ne pas faire sur une écoute d'un scroll ! c'est le mur assuré (chaque fois que l'utilisateur scroll, ça lance un setInterval).

Je te remercie, J'avas crue lire ici et là que c'etait mieux

Pour l'instant j'ai fait quelque chose du type:

window.addEventListener("scroll", docanSlide,{'passive': 'true'});
	function docanSlide() {
    	var t = document.documentElement.scrollTop;
    	
    	if (t >= 80) {
			document.getElementById('rea-top').display = 'none';
    		document.getElementById('header_baseline').style.display = 'none';
    		document.getElementById('header_user').style.top = '0px';
			document.querySelector("header").style.position = 'fixed';
			document.querySelector("header").style.fontSize = '0.9em';
			document.querySelector("header").style.marginTop = '0px';
			document.querySelector("header").style.boxShadow = '0 5px 2px 0 rgba(0,0,0,.15)';
    	} else {
			document.getElementById('rea-top').style.display = 'block';
    		document.getElementById('header_baseline').style.display = 'block';
			document.getElementById('header_user').style.top = '26px';
			document.querySelector("header").style.position = 'unset';
			document.querySelector("header").style.fontSize = '1em';
			document.querySelector("header").style.marginTop = '26px';
			document.querySelector("header").style.boxShadow = 'none';

    		}
    

    }

Mais je suppose qu'il serait préférable de l'améliorer pour modifier les Styles qu'une fois à la monter et un fois à a la descende et pas à chaque scroll avec un controle de la position précédente.

niuxe a écrit :
Regarde du côté de IntersectionObserver (si tu veux faire quelques chose de simple et que tu n'as pas la contrainte du crossbrowser.

La meilleur manière étant de le faire soit même à l'objet (observer pattern, je t'aime) ou pas.

Faut que je creuse de ce coté car j'ai rien compris

a écrit :
Mais je suppose qu'il serait préférable de l'améliorer

Oui

if (t >= 80) {
  document.body.classList.add('page-scrolled');
} else {
  document.body.classList.remove('page-scrolled');
}

kustolovic a écrit :
Mais je suppose qu'il serait préférable de l'améliorer

Oui

if (t >= 80) {
  document.body.classList.add('page-scrolled');
} else {
  document.body.classList.remove('page-scrolled');
}

Effectivement c'est mieux

window.addEventListener("scroll", docanSlide,{'passive': 'true'});
var lastScrollTop = 0;
	function docanSlide() {
    	var t = window.pageYOffset || document.documentElement.scrollTop;
       if ((t > lastScrollTop)  && (t >= 80) && (!document.body.classList.contains('page-scrolled'))){

	      document.body.classList.add('page-scrolled');
	   } else if
	   	((t <= 80) && (t < lastScrollTop))
	    {
	   		 document.body.classList.remove('page-scrolled');
	   }
	   lastScrollTop = t;
    }