SCROLLCLASS
Le composant SCROLLCLASS
permet, à l’apparition ou à la disparition d’un élément dans le viewport, de supprimer (par défaut) ou d’ajouter une classe.
Syntaxe
Comme tout déclencheur JS de SipaUI il est préfixé par data-su
. Attention, la syntaxe impose l’imbrication de guillemets : 2 pour encadrer la valeur du data-suscrollclass
et d’autres pour encadrer les paramètres et leur valeur. Ces derniers doivent par ailleurs respecter la syntaxe JSON {"parametre":"valeur"}
. Par conséquent, il faut choisir des ''
pour encadrer le contenu de scrollclass
. Ce qui donne : data-suscrollclass='{"paramètre":"valeur"}'
.
Paramètres
klass
: classe CSS à enlever ou à ajouter à l’élément (su-no-scroll
par défaut). Exemple :data-suscrollclass="{klass:'classe'}"
sel
: permet de désigner l’élément impacté par le changement de classe (lui-même par défaut). Exemple :data-suscrollclass="{sel:'#anId'}"
what
: désigne quel défilement est surveillé (défilement de la fenêtre courante ou le défilement à l’intérieur d’un élément) (window
par défaut). Exemple :data-suscrollclass="{what:'#anId'}"
inverted
: inverse le comportement du composant (ajouter au lieu d’enlever).false
par défaut. Exemple :data-ofscrollclass="{'inverted':'true'}"
removeonly
: avec l’ajout de cet attribut, le composant ne fera qu’enlever la classe concernée.false
par défaut. Exemple :data-ofscrollclass="{'removeonly':'true'}"
y
: hauteur en pixel faisant la frontière entre l’ajout ou la suppression de la classe. Cette hauteur est calculée à partir de l’ordonnée 0 de l’élément scrollé .100
par défaut. Exemple :data-ofscrollclass="{'y':'300'}"
scrollEl
: définit comme hauteur "frontière" la hauteur à laquelle est l’élément visé.null
par défaut. Exemple :data-ofscrollclass="{'scrollEl':'#demo'}"
bottom
: la bascule sera effectuée lorsque le bas de la fenêtre aura atteint l’élément (au lieu du haut).false
par défaut. Exemple :data-ofscrollclass="{'bottom':'true'}"
delta
: permet de réaliser un "delta" de pixels sur la hauteur palier (utilisé en complément descrollEl
). Exemple :data-ofscrollclass="{'scrollEl':'#demo''delta':'-100'}"
deltaSel
: sélecteur appliquant en delta la somme de la "hauteur des éléments sélectionnés" en pixels. Écrase toute valeur dedelta
. Exemple :data-ofscrollclass="{'scrollEl':'#demo','deltaSel':'#supplement'}"
deltaSelInverted
: permet d’inverser la hauteur dedeltaSel
.false
par défaut. Exemple :data-ofscrollclass="{'scrollEl':'#demo','deltaSel':'#supplement','deltaSelInverted':'true'}"
Exemples
Démo 0 : cas basique + y
Dans cet exemple de base, le suscrollclass
enlève la classe active
à l’élément, ce qui a pour effet d’inverser les couleurs de texte et fond. On lui a ajouté le paramètre y
pour que le changement d’état soit visible quand on a scrollé 300px depuis le haut de la page.
N. B. – La classe enlevée par le JS est positionnée par lui au chargement de la page, il n’est donc pas nécessaire de la mettre dans le code HTML de départ.
<style type="text/css">
.scrollclass-container {
min-height: 1200px;
}
.scrollclass-demo-element {
display: block;
background: white;
border: 1px solid var(--gris-clair);
position: sticky;
top: 0;
}
.scrollclass-demo-element.active {
background: black;
color: white;
}
</style>
<div class="scrollclass-container">
<p class="scrollclass-demo-element active" data-suscrollclass='{"y":"300","klass":"active"}'>Scrollclass</p>
<p style="background: pink; height: 300px">autre</p>
</div>
Démo 1 : cas sel
Ici, le scrollclass
positionné sur le premier paragraphe agit sur celui en-dessous, identifié par son id
.
<style type="text/css">
.scrollclass-container {
min-height: 1200px;
}
.scrollclass-demo-element {
display: block;
background: white;
border: 1px solid black;
position: sticky;
top: 0;
height: 20px;
}
#demo1-cible {
top: 20px;
}
.scrollclass-demo-element.active {
background: black;
color: white;
}
</style>
<div class="scrollclass-container">
<p class="scrollclass-demo-element" data-suscrollclass='{"y":"300","klass":"active", "sel":"#demo1-cible"}'>Scrollclass</p>
<p class="scrollclass-demo-element active" id="demo1-cible" >Cible du scrollclass</p>
</div>
Démo 2 : cas what
Ici, le scrollclass
surveille le scroll du <div id="demo1-container">
<style type="text/css">
.scrollclass-container {
overflow-y: scroll;
height: 300px;
border: 1px solid;
}
.scrollclass-demo-element {
display: block;
min-height: 1200px;
}
.scrollclass-demo-element p {
position: sticky;
top: 0;
height: 20px;
background: white;
border: 1px solid black;
}
.scrollclass-demo-element.active p {
background: black;
color: white;
}
</style>
<div id="demo1-container" class="scrollclass-container">
<div class="scrollclass-demo-element active" data-suscrollclass='{"y":"150","klass":"active", "what":"#demo1-container"}'>
<p>Scrollclass</p>
</div>
</div>
Démo 3 : cas bottom
Le scrollclass
n’agit ici que lorsque la distance définie dans y
atteint le bas de la zone scrollable. L’iframe faisant 400px et le paramètre y
du scrollclass
étant à 600px, il n’agit qu’au scroll de 200px (quand le bas de la fenêtre qui est déjà à 400px a parcouru les 200px manquant pour atteindre les 600px de y
).
<style type="text/css">
.scrollclass-container {
min-height: 1200px;
}
.scrollclass-demo-element {
display: block;
background: white;
border: 1px solid var(--gris-clair);
position: sticky;
top: 0;
}
.scrollclass-demo-element.active {
background: black;
color: white;
}
</style>
<div class="scrollclass-container">
<p class="scrollclass-demo-element active" data-suscrollclass='{"klass":"active", "y":"600", "bottom":"true"}'>Scrollclass</p>
</div>
Démo 4 : cas removeonly
Dans cet exemple, le scrollclass
ne remet pas la classe active
après l’avoir enlevée si on scroll dans l’autre sens.
<style type="text/css">
.scrollclass-container {
min-height: 1200px;
}
.scrollclass-demo-element {
display: block;
background: white;
border: 1px solid var(--gris-clair);
position: sticky;
top: 0;
}
.scrollclass-demo-element.active {
background: black;
color: white;
}
</style>
<div class="scrollclass-container">
<p class="scrollclass-demo-element active" data-suscrollclass='{"klass":"active", "removeonly":"true","y":"300"}'>Scrollclass</p>
</div>
Démo 5 : cas scrollEl
Là, le scrollclass
agit quand le bloc vert atteint le haut du bloc contenant ce scrollclass
.
<style type="text/css">
.scrollclass-container {
min-height: 1200px;
}
.scrollclass-demo-element {
display: block;
background: white;
border: 1px solid var(--gris-clair);
position: sticky;
top: 0;
width: 50%;
}
.scrollclass-demo-element.active {
background: black;
color: white;
}
.blue {
background: blue !important;
}
.red {
background: red !important;
}
.green {
background: green !important;
}
.yellow {
background: yellow !important;
}
.blue ,
.red,
.green,
.yellow {
height: 300px;
}
</style>
<div class="scrollclass-container">
<p class="scrollclass-demo-element active" data-suscrollclass='{"klass":"active", "scrollEl":".scrollclass-container .green"}'>Scrollclass</p>
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
<div class="yellow"></div>
</div>