Tagsticky

[jQuery] Bootstrap 3 et affix ne conserve pas la pleine largeur d’un élément si j’utilise les classes de la grille

[CSS] Un élément sticky en position: fixed; dans une iFrame sous iOS/iPhone

Source: https://github.com/PierBover/ios-iframe-fix.

Code source de la solution en full CSS: ios-iframe-fix-master.

[jQuery] un sticky avec effet smooth

[jQuery][Foundation 6] Détecter la direction du scroll et agir sur des éléments Sticky

Plug-in scrollDirection disponible sur GitHub: https://github.com/franklang/detect-scroll-direction.

Les bases de la mise en place

Le composant Sticky de Foundation 6 for Sites permet de fixer des éléments dans la fenêtre. La technique est utilisée par de nombreux sites pour, par exemple, laisser le bandeau affiché lorsque l’utilisateur scrolle vers le bas de la page.

Il manque cependant une fonctionnalité très ergonomique, notamment sur les plus petits devices (smartphones, petites tablettes) qui consiste à masquer le bandeau lorsque l’utilisateur scrolle vers le bas de la page et à l’afficher dès qu’il scrolle vers le haut (afin qu’il n’ait pas besoin de scroller jusqu’au haut de page pour atteindre le menu, par exemple). Et cette seconde technique est présente sur de plus en plus de sites (https://wpformation.com/ – visionner avec un Smartphone, http://www.eurosport.fr/cyclisme/ – visionner avec un Smartphone).

On commence par mettre en place le composant Sticky (jusque là, pas de dev spé : tout est disponible dans Foundation.

Ensuite, on ajoute en spé (via jQuery) un data-attribute nommé data-scroll-direction sur l’élément HTML de la page. La valeur de ce data-attribute sera down ou up selon que l’utilisateur scrolle vers le bas ou vers le haut de la page.

On cible ensuite les éléments à masquer au scroll down.

Illustration:

1. L’utilisateur arrive sur la page; elle se présente comme ceci:

2. L’utilisateur a scrollé vers le bas. Dans notre exemple, une partie seulement du bandeau est masquée. On laisse en Sticky le moteur de recherche car il est très important sur ce site.

3. L’utilisateur a scrollé vers le haut (1px de scroll vers le haut suffit). La partie masquée du bandeau réapparait.

Appliquer une animation et un délais

Utilisation du projet animate.css

Importer le projet https://daneden.github.io/animate.css/ dans votre propre projet (j’utilise npm pour celà). On charge uniquement les animations dont on a besoin:

Agir sur votre élément Sticky en invoquant les animations et en ajoutant un temps d’exécution:

La fonction hideWithDelay

Permet d’appliquer une classe .hide (qui n’est autre qu’un display: none;) issue de Foundation 6 for Sites au bout de x secondes, qui correspond au temps qu’il faut à votre animation CSS pour se terminer. Dans notre exemple, l’animation CSS mettra 300ms à s’exécuter mais on ajoute la classe .hide au bout de 290ms pour éviter un effet de flash à l’écran:

Résolution d’erreurs, bugs…

Des éléments de la page ou l’ascenseur de la fenêtre se mettent à clignoter (flickering, blinking)

Source: sticky header blinking.

Testé et fonctionnel sur un projet en prod: il suffit de mettre une hauteur fixe à l’élément sticky. Si votre site/appli est Responsive, que la hauteur est différente d’un breakpoint à l’autre et que vous avez la chance d’utiliser Foundation For Sites (v6 dans mon exemple) :

Même solution en vanilla JS (mais avec Lodash)

Cas particulier: les éléments sticky disparaissent totalement en haut de l’écran (avec effet d’animation) avant de réapparaître brutalement

ATTENTION: on part bien du composant Sticky de Foundation for Sites v6, animé via la bibliothèque animate.css (et plus précisément l’animation slideOutUp). Ce cas particulier peut éventuellement vous donner des pistes si vous utilisez un autre composant sticky et une autre bibliothèque d’animation, mais il existe aujourd’hui d’autres moyens de produire un effet de smooth scroll qu’il vaut mieux privilégier.

Pour ce qui est de la qualité de cette soultion, ne la cherchez pas… Mais elle a le mérite de fonctionner!

Dans ce cas là, les animations proposées par la bibliothèque Animate.css peuvent ne pas convenir. Dans la déclaration CSS transform: translate3d(0, -100%, 0); la valeur de -100% correspond à la hauteur de l’élément. C’est ce fait qu’on voit l’élément sticky scroller entièrement hors-champ avant de réapparaître brutalement.

Mon idée: appliquer temporairement (le temps de l’animation) un margin-top de la hauteur de l’élément à ce dernier afin qu’il s’arrête aux limites de la fenêtre, puis retirer ce style.

Ressources en ligne:

Nouvelle version:

Ma nouvelle animation:

Une fonction javascript qui s’occupe d’appliquer le margin-top (qui peut posséder une valeur dynamique):

…qu’on applique avec un tout petit délais histoire de laisser le temps au DOM de se mettre à jour:

Ancienne version:

Ma nouvelle animation:

…appliquée à mes éléments avec l’ajout de forwards:

Une fonction javascript qui s’occupe d’appliquer le margin-top (qui peut posséder une valeur dynamique):

…qu’on applique avec un tout petit délais histoire de laisser le temps au DOM de se mettre à jour:

[Foundation 6] Créer une ancre vers le haut de page avec le composant Sticky

Attention: merde lorsqu’on utilise des composants de type Accordéon, etc … (lorsque la hauteur de page s’agrandit) !!

Sur chaque page du site, une fonctionnalité de scroll automatique/retour vers le haut de page peut-être ajoutée en exploitant le composant Sticky de Foundation 6. Ce lien de retour devrait apparaître dès qu’un scroll est nécessaire et serait fixé en bas de page sur la limite haute du bloc footer.

Bloc HTML à placer en haut de page (dans le DOM)

Bloc HTML à placer juste avant le footer (dans le DOM)

Code JS

Edit 01/12/2017: (à priori) fonctionne sans le code ci-dessous…

Code SASS

A noter: la présence de la propriété pointer-events sur .scroll-up.sticky.is-at-bottom et .scroll-up a pour éviter que les éléments qui se trouvent sous la zone (à 100% de largeur) du sticky soient bloqués au clic. <a href="https://caniuse.com/#search=pointer-events">pointer-events</a> ne fonctionnera pas sous IE10 et en-dessous, mais on s’en b*% l$! c*ù|!!€%.

A noter #2: la présence de la propriété // margin-right: -25%; sur .scroll-up a pour permettre de positionner à sa guise le lien.

[jQuery] jQuery ne fonctionne plus après rafraîchissement AJAX d’un élément dans la page

Sources : Click doesn’t work after AJAX load – jQuery, Jquery not working after ajax refresh page.

Si vous utilisez AJAX sur votre site, il est possible que des événements comme click, submit ou hover ne fonctionnent plus après rafraîchissement si vous ne les attachez pas proprement.
Je vais utiliser l’événement click pour décrire le problème, mais ce dernier s’applique à l’ensemble des événements jQuery.

Structure HTML :

Code jQuery qui fonctionnera uniquement avant rafraîchissement AJAX :

Code jQuery qui fonctionnera avant et après rafraîchissement AJAX :

© 2020 devfrontend.info

Theme by Anders NorénUp ↑