Comment mettre en œuvre le défilement à effet fixe?

Si vous regardez le site:

http://eyeheartworld.org/pages/the-cause

et faites défiler vers le bas, il y a une implémentation d’un concept que j’ai trouvé sur codepen (lorsque vous faites défiler vers le bas, la barre de navigation défile et est fixe)

var header = $("#guide-template"); $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= window.innerHeight) { header.addClass("fixed"); } else { header.removeClass("fixed"); } });

( http://codepen.io/simpleminded/pen/noaJj ) et je voulais juste faire un survol rapide du moins de la façon dont les images sur la page d’accueil fonctionnent. Ils défilent vers le haut puis restnt fixes tandis que les autres images défilent dessus.

c’est un cas simple d’ajout de position: fixed; à un bloc en haut de votre contenu HTML. Voici un exemple très basique:

 body{ margin: 0; padding: 0; } #top-bar{ height: 40px; width: 100%; background-color: #000000; color: #FFFFFF; position: fixed; } #content{ height: 3000px; padding-top: 40px; }

     
  AAA
 BBB
 CCC
 DDD
 EEE
 FFF
 XXX
 YYY

Il recherche essentiellement la hauteur de votre écran avec: window.innerHeight et ajoute une classe lorsque le montant défilé est supérieur à la hauteur de votre écran.

C’est la même hauteur que #introscreen, qui est réglé sur 100vh avec css. 100vh est fondamentalement la même chose que 100% ( Plus d’informations sur VH ici ).

Ainsi, la ‘barre de navigation’ est toujours juste en dessous de l’écran des utilisateurs, et une fois que vous faites défiler ce montant exact, il ajoute la classe ‘fixed’ qui fixe la barre de navigation à l’écran. Si vous faites défiler en arrière, la classe est à nouveau supprimée.