Menu fixe mais flottant selon la scrollbar (JS + CSS)

Certains ne comprennent peut-être pas ce dont je veux parler par « menu fixe mais flottant selon la scrollbar », en fait je fais référence au nouveau menu dans Gmail qui est figé en haut mais suit la scrollbar lorsque nous descendons l’ascenseur.
Cet effet permet d’avoir toujours à disposition le menu où que nous soyons dans la lecture de nos mails.

Ça semble anodin au premier abord pour la plupart des gens, un peu de CSS, un petit « position: fixed » et le tour est joué ? hé bien non, c’est plus fort que ça, car au départ le menu est incrusté et c’est seulement lorque la scrollbar atteint un point précis (ici lorsque le haut de la fenêtre atteint le menu) que le menu devient flottant, c’est donc dynamique, à comprendre qu’il va falloir utiliser du JavaScript.

Ce menu m’a intrigué dès le départ car je ne savais pas moi-même réaliser un tel effet, jusqu’au jour où j’en ai eu besoin pour l’affichage d’un deck de type « Commander » sur MS.

Démo

En effet au niveau de la vue d’un deck, le survol de la souris sur le nom d’une carte fait afficher l’image de celle-ci sur le côté gauche. Le problème c’est que la quantité de cartes d’un deck « Commander » fait que l’image ne devient plus visible lorsque nous scrollons vers le bas pour voir l’intégralité des cartes. D’où l’idée de rendre flottante l’image de la carte lorsque la scrollbar tente de la masquer.

Code

Finalement c’est assez simple à comprendre et donc à mettre en place.

CSS

Protégez vos données sensibles grâce à un cryptage avancé.

Dites adieu aux malwares et aux risques de piratage, que ce soit chez vous ou sur un Wi-Fi public.

⇒ Changez votre adresse IP et accédez aux contenus bloqués ou géo-restreints partout dans le monde

Votre élément (menu, image, bandeau, div, etc.) a rendre flottant a par défaut une position « relative » par rapport à son conteneur, cette position devra passée à « fixed » au moment où nous le choisirons, dans notre cas lorsque la scrollbar tentera de masquer notre élément.

Le changement d’état de notre élement se fera par le biais d’une classe CSS, appliquée par du JavaScript, la voici :

votre_menu_ou_votre_image_ou_votre_element.floatable {
 position: fixed;
 top: 10px; // non-obligatoire
 }

JS

Pour détecter qu’il est temps de changer la position de notre élément, il faut connaître le positionnement de la scrollbar et la comparer au positionnement de notre élément. Pour cela j’utilise la fonction $(window).scroll() de jQuery.
Voici le mécanisme à mettre en place :

// listen for scroll
 var positionElementInPage = $('#votre_menu_ou_votre_image_ou_votre_element').offset().top;
 $(window).scroll(
 function() {
 if ($(window).scrollTop() >= positionElementInPage) {
 // fixed
 $('#votre_menu_ou_votre_image_ou_votre_element').addClass("floatable");
 } else {
 // relative
 $('#votre_menu_ou_votre_image_ou_votre_element').removeClass("floatable");
 }
 }
 );

Lorsque nous descendons l’image nous suit et reste visible, lorsque nous remontons, elle se recale à l’endroit du départ si nous dépassons son emplacement d’origine.

Sources

Si mes explications ne sont pas claires, voici un fichier d’exemple : menu_fixe_mais_flottant.html.