Introduction
Contenu de l'introduction...
Documentation
Documentation - Scrollspy.
Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.
Démarrage
Concepts de base
Utilitaires
Scrollspy
Marssel propose un système de scrollspy pour suivre la position de défilement et mettre en évidence automatiquement les liens de navigation correspondant à la section visible. Idéal pour les menus de table des matières ou navigation de page.
Configuration de base
Le ScrollspyManager est automatiquement initialisé :
const marssel = new Marssel();
// Le ScrollspyManager est prêt à l'emploiStructure HTML
Un scrollspy se compose d'une navigation et de sections cibles :
Section 1
Contenu de la section 1 : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste laboriosam tempore facilis quod illo asperiores voluptatem nisi voluptate vel corrupti voluptatibus quam excepturi consequatur ullam ipsam veritatis, in dolorum ab.
Section 2
Contenu de la section 2 : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste laboriosam tempore facilis quod illo asperiores voluptatem nisi voluptate vel corrupti voluptatibus quam excepturi consequatur ullam ipsam veritatis, in dolorum ab.
Section 3
Contenu de la section 3 : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste laboriosam tempore facilis quod illo asperiores voluptatem nisi voluptate vel corrupti voluptatibus quam excepturi consequatur ullam ipsam veritatis, in dolorum ab.
<!-- Navigation avec scrollspy -->
<nav data-scrollspy="content-container"
data-scrollspy-active="bg-[red]"
>
<a href="#section-1">Section 1</a>
<a href="#section-2">Section 2</a>
<a href="#section-3">Section 3</a>
</nav>
<!-- Conteneur des sections -->
<div id="content-container">
<section id="section-1">
<h4>Section 1</h4>
<p>Contenu de la section 1...</p>
</section>
<section id="section-2">
<h4>Section 2</h4>
<p>Contenu de la section 2...</p>
</section>
<section id="section-3">
<h4>Section 3</h4>
<p>Contenu de la section 3...</p>
</section>
</div>Options disponibles
Personnalisez le comportement avec des attributs data :
<nav data-scrollspy="content"
data-scrollspy-offset="100" <!-- Décalage en pixels (défaut: 0) -->
data-scrollspy-active="active" <!-- Classe active (défaut: active) -->
data-scrollspy-threshold="0.2" <!-- Seuil de visibilité (défaut: 0.2) -->
data-scrollspy-smooth="true"> <!-- Défilement fluide (défaut: true) -->
<a href="#intro">Introduction</a>
<a href="#features">Fonctionnalités</a>
<a href="#pricing">Tarifs</a>
</nav>Navigation latérale fixe
Exemple d'une table des matières fixe :
<!-- Navigation fixe -->
<nav data-scrollspy="article-content"
data-scrollspy-offset="80"
class="qw-[200px] bg-[ffffff] p-[20px] rounded-[8px] shadow-[0_2px_8px_rgba(0_0_0_0.1)]"
>
<h4 class="m-[0_0_16px_0] font-size-[14px] font-weight-[600] c-[6b7280] text-transform-[uppercase]">
Table des matières
</h4>
<div class="d-[flex] flex-direction-[column] gap-[8px]">
<a href="#introduction"
class="link-scrollspy---[c-[6b7280]+text-dec-[none]+font-size-[14px]+p-[6px_0]+border-l-[2px_solid_transparent]+pl-[12px]+transition-[all_0.2s]] link-scrollspy---[c-[2563eb]]:hover">
Introduction
</a>
<a href="#getting-started"
class="link-scrollspy">
Démarrage
</a>
<a href="#features"
class="link-scrollspy">
Fonctionnalités
</a>
<a href="#examples"
class="link-scrollspy">
Exemples
</a>
</div>
</nav>
<!-- Style pour l'état actif -->
<style>
[data-scrollspy] a.active {
color: #2563eb !important;
border-left-color: #2563eb !important;
font-weight: 600;
}
</style>
<!-- Contenu de l'article -->
<div id="article-content" class="ml-[260px]">
<section id="introduction">
<h2>Introduction</h2>
<p>Contenu de l'introduction...</p>
</section>
<!-- Autres sections... -->
</div>Navigation horizontale
Exemple d'une barre de navigation en haut de page :
<header class="pos-[sticky] top-[0] bg-[ffffff] shadow-[0_2px_4px_rgba(0_0_0_0.1)] z-[100]">
<nav data-scrollspy="page-content"
data-scrollspy-offset="100"
data-scrollspy-active="bg-[red]"
class="d-[flex] justify-[center] gap-[32px] p-[16px]"
>
<a href="#home"
class="link-scrollspy-hor---[c-[333]+text-dec-[none]+font-weight-[500]+transition-[color_0.2s]] link-scrollspy-hor---[c-[2563eb]]:hover">
Accueil
</a>
<a href="#about"
class="link-scrollspy-hor">
À propos
</a>
<a href="#services"
class="link-scrollspy-hor">
Services
</a>
<a href="#contact"
class="link-scrollspy-hor">
Contact
</a>
</nav>
</header>API JavaScript
Contrôlez le scrollspy programmatiquement :
// Rafraîchir tous les scrollspies (après modification du DOM)
marssel.scrollspyManager.refreshAll();
// Rafraîchir un scrollspy spécifique
const navElement = document.querySelector('[data-scrollspy]');
const scrollspy = marssel.scrollspyManager.scrollspies.get(navElement);
marssel.scrollspyManager.refreshScrollspy(scrollspy);
// Mettre à jour tous les scrollspies
marssel.scrollspyManager.updateAll();
// Détruire un scrollspy
marssel.scrollspyManager.destroy(navElement);
// Détruire tous les scrollspies
marssel.scrollspyManager.destroyAll();Défilement fluide automatique
Le scrollspy active automatiquement le défilement fluide au clic sur les liens :
<!-- Défilement fluide activé par défaut -->
<nav data-scrollspy="content" data-scrollspy-smooth="true">
<a href="#section-1">Section 1</a>
<a href="#section-2">Section 2</a>
</nav>
<!-- Désactiver le défilement fluide -->
<nav data-scrollspy="content" data-scrollspy-smooth="false">
<a href="#section-1">Section 1</a>
<a href="#section-2">Section 2</a>
</nav>Gestion du décalage
Utilisez data-scrollspy-offset pour compenser les headers fixes :
<!-- Avec header fixe de 80px -->
<nav data-scrollspy="content" data-scrollspy-offset="80">
<a href="#section-1">Section 1</a>
<a href="#section-2">Section 2</a>
</nav>Seuil de visibilité
Contrôlez quand une section est considérée comme active :
<!-- Section active quand 20% visible (défaut) -->
<nav data-scrollspy="content" data-scrollspy-threshold="0.2">
<a href="#section-1">Section 1</a>
</nav>
<!-- Section active quand 50% visible -->
<nav data-scrollspy="content" data-scrollspy-threshold="0.5">
<a href="#section-1">Section 1</a>
</nav>