Indiquant la position de défilement sur une page avec CSS

Le défilement est quelque chose que nous connaissons et faisons tous sur le Web dans la mesure où c'est une attente ou peut-être même une habitude, comme se brosser les dents. C'est probablement pourquoi nous ne pensons pas trop à concevoir l'expérience de défilement - c'est une fonction de base bien connue. En fait, le dicton populaire «il n'y a pas de giron» vient de l'idée que les gens savent faire défiler et il n'y a pas de ligne arbitraire dont les gens ne subissent pas.

Les fonctionnalités basées sur Scroll ont tendance à impliquer une concoction sur mesure de CSS et JavaScript. C'est parce qu'il n'y a tout simplement pas autant de fonctionnalités natives disponibles pour le faire. Mais que se passe-t-il si nous pouvions accomplir quelque chose qui n'utilise que CSS?

Prenez cette ingénieuse barre de défilement horizontale avec CSS, par exemple. Je veux faire quelque chose de similaire, mais indiquer des sections de défilement plutôt que de capturer le défilement continu. En d'autres termes, plutôt que d'augmenter la longueur de l'indicateur pendant le parchemin, je ne veux augmenter que la longueur lorsqu'une certaine section de la page a été atteinte.

Comme ça:

Voici mon plan: chaque section porte un indicateur indétectable jusqu'à ce qu'il atteigne le haut de l'écran. C'est là qu'il devient visible en changeant de couleur et colle au sommet de la fenêtre.

L'opposé exact devrait se produire en sens inverse: l'indicateur suivra lorsque vous faites défiler l'écran, se camouflant à ne pas être détecté à l'œil nu.

Il y a deux pièces clés à cela. Le premier est que l'indicateur change de couleur lorsqu'il est près du haut de l'écran. Le second est que l'indicateur reste en haut de l'écran et ne descend que lorsque sa section est défilée vers le bas.

Le second est facile à faire: nous utilisons la position: collante; sur nos éléments. Lorsqu'une page est défilée, un élément collant colle à une position donnée sur l'écran dans son conteneur parent.

Cela nous amène à changer les couleurs. Étant donné que l'arrière-plan d'un document HTML est blanc par défaut, je garde le blanc comme couleur de base pour la démo. Cela signifie que l'indicateur doit avoir l'air blanc lorsqu'il est au-dessus de la couleur de base et se tourner vers une autre couleur lorsqu'il est au-dessus de la barre d'indicateur en haut de l'écran.

C'est là que les modes CSS Blend entrent en jeu. Ils nous donnent tellement d'options pour créer une variété d'amalgames de couleurs. Je vais aller avec la valeur de superposition. Celui-ci est de nature assez dynamique. Je n'expliquerai pas le mélange en profondeur (parce que les CSS-Tricks Alamanac font déjà un bon travail de cela) mais en tenant compte de cette démo, je dirai ceci: Lorsque la couleur de fond est blanche, la couleur de premier plan qui en résulte est blanche; Et lorsque l'arrière-plan est une autre couleur, la couleur résultante est plus foncée ou plus claire, selon la couleur avec laquelle il est mélangé.

L'indicateur s'arrête dans la démo est noir. Mais, à cause du mélange, nous les considérons comme blancs car ils sont sur fond blanc. Et quand ils sont au-dessus de l'élément de conteneur indicateur, qui est une belle nuance de violet, nous voyons un arrêt indicateur de violet sombre, car nous mélangeons le noir de l'indicateur avec le violet du conteneur de l'indicateur.

En commençant par le HTML:

 <div>
 <strong> sections défilé ↴ </strong>
 
 <div> </div>
</div>



<div class="passAgestops"> </div>



<div>
 
</div>



<div> </div>



<div>
 
</div>



<div> </div>



<div>
 
</div>

Assez simple, non? Il y a un récipient collant tout en haut qui contient les indicateurs lorsqu'ils atteignent le sommet. À partir de là, nous avons trois sections de contenu, chacune surmontée d'un indicateur qui collera au sommet avec l'indicateur et se mélangera avec.

Voici le CSS:

 .PassAgEstops {
 Color en arrière-plan: noir; / * Chaque arrêt indicateur est noir * /
 MODE-MODE-MODED: superposition; / * Cela le fait paraître blanc sur un fond blanc * /
 Largeur: 33,3%; / * Trois sections au total, donc chaque section est un tiers * /
 En haut: calc (1EM 3PX);
}


#passage, 
.PassAgEstops {
 hauteur: 10px;
}


#passagewrapper,
.PassAgEstops {
 Position: collante; / * Le conteneur et les arrêts doivent rester au sommet * /
 Z-Index: 1; / * Assurez-vous que l'indicateur et les arrêts restent au premier plan * /
}


#passage {
 Contexte: Violet; / * Va se fondre avec du noir pour faire un indicateur violet plus foncé * /
 marge: 0 0 20px 0;
}


#passagewrapper {
 Color d'arrière-plan: blanc; / * Assurez-vous que nous travaillons avec White pour masquer les arrêts des indicateurs * /
 hauteur: 40px;
 En haut: 0px;
}


/ * Chaque arrêt déplacera un tiers de la largeur du conteneur indicateur pour couvrir le tout lorsque la dernière section est atteinte. * /
.PassAgestops: Nth-Child (4) {marge-gauche: 33,3%; }
.PassAgestops: Nth-Child (6) {marge-gauche: 66,6%; }


/ * Plus de style, bla bla. * /

Les indicateurs (.Passagestops) sont noirs. Mais le mode de mélange de superposition les fait paraître blancs lorsqu'il se mélange avec l'arrière-plan blanc en dessous. Puisqu'il y a trois sections, chaque indicateur est d'un tiers de la largeur.

Les indicateurs ont la position: collant; avec une valeur de distance supérieure. Cela signifie que les indicateurs colleront une fois qu'ils atteindront la position calculée en haut de l'écran. Lorsque cela se produit, les indicateurs noirs qui sont apparus blancs se mélangent avec le conteneur d'indicateur Violet, ce qui les fait paraître un violet sombre, représentant la nouvelle position de défilement sur la page.

L'inverse est également vrai. Lorsqu'un indicateur perd sa position collante, il se déplacera de l'arrière-plan violet de la barre d'indicateur à l'arrière-plan blanc de la page, le cachant à nouveau… comme s'il n'était jamais là!

Voici à nouveau la démo:

C'est ça. Vous pouvez peut-être expérimenter davantage avec cela en ayant un fond non blanc avec un autre mode de mélange, ou un gradient pour la barre d'indicateur ou les arrêts.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!