Scrollspy

Detects elements into the viewport

Installation

Scrollspy requires the following file:

my-scrollspy="anchors" on any HTML tag applies….

    <nav class="">
        <a href="#section-description" class="my-btn mod-tab">Description</a>
        <a href="#section-reprise" class="my-btn mod-tab">Reprise</a>
        <a href="#section-financement" class="my-btn mod-tab">financement</a>
        <a href="#section-livraison" class="my-btn mod-tab">Livraison</a>
        <a href="#section-avis" class="my-btn mod-tab">Avis</a>
    </nav>
    <section id="section-description" my-scrollspy="anchors"><h2>Description</h2></section>
    <section id="section-reprise" my-scrollspy="anchors"><h2>Reprise</h2></section>
    <section id="section-financement" my-scrollspy="anchors"><h2>financement</h2></section>
    <section id="section-livraison" my-scrollspy="anchors"><h2>livraison</h2></section>
    <section id="section-avis" my-scrollspy="anchors"><h2>avis</h2></section>
    <!-- DEMO ONLY -->
    <style>
        body {
            background-color:  var(--briks-color-neutral-light-3);
        }
        nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: var(--briks-color-neutral-light-max);
        }
        section {
            height: 150vh;
            padding-top: 100px;
            background-color: var(--briks-color-neutral-light-max);
            margin-bottom: 100px;
        }
    </style>

Methods

Scrollspy comes with methods that can be called through myTabs object :

Method name Arguments Description
myScrollspy.update() no Build/refresh instances of all tracked elements, invoked at start