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 de scrollEl). 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 de delta. Exemple : data-ofscrollclass="{'scrollEl':'#demo','deltaSel':'#supplement'}"
  • deltaSelInverted : permet d’inverser la hauteur de deltaSel. 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>

Le code a bien été copié !