Vue Bootstrap Scrollspy MDB Pro component

Vue Scrollspy - Bootstrap 4 & Material Design

Vue Bootstrap scrollspy is a plugin which shows on the navigation list current position on the page depends on the scroll position defined by the user.

How it works

Bootstrap scrollspy is a plugin which shows on the navigation list current position on the page depends on the scroll position defined by the user.

When successfully implemented, your nav or list group will update accordingly, moving the .active class from one item to the next based on their associated targets.

Basic example

Scroll down to see the effect

section1

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

section2

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

section3

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

template
script


        <template>
          <mdb-container>
            <mdb-scrollspy-box>
              <mdb-scrollspy-list color="red">
                <mdb-scrollspy-list-item @click.native.prevent="scrollTo('section 1')" :active="active === 1 ? true : false">section1</mdb-scrollspy-list-item>
                <mdb-scrollspy-list-item @click.native.prevent="scrollTo('section 2')" :active="active === 2 ? true : false">section2</mdb-scrollspy-list-item>
                <mdb-scrollspy-list-item @click.native.prevent="scrollTo('section 3')" :active="active === 3 ? true : false">section3</mdb-scrollspy-list-item>
              </mdb-scrollspy-list>
              <div :style="{height: '60px'}"></div>
              <h4>Scroll down to see the effect</h4>
              <hr class="mb-5" />
              <mdb-scrollspy-text @scroll.native="handleScroll" ref="sectionText">
                <section v-for="(section, key) in sections" :key="key" :ref="section.id">
                  <h4>{{section.topic}}</h4>
                  <p>{{section.text}}</p>
                </section>
              </mdb-scrollspy-text>
            </mdb-scrollspy-box>
          </mdb-container>
        </template>


        <script>
          import { mdbContainer, mdbScrollspyBox, mdbScrollspyList, mdbScrollspyListItem, mdbScrollspyText } from 'mdbvue';
          export default {
            name: 'ScrollspyPage',
            components: {
              mdbContainer,
              mdbScrollspyBox,
              mdbScrollspyList,
              mdbScrollspyListItem,
              mdbScrollspyText
            },
            data() {
              return {
                active: 1,
                scrollSpySectionsOffset: [],
                sections: [
                  { id: "section 1", topic: "section 1", text: "(...)" },
                  { id: "section 2", topic: "section 2", text: "(...)"},
                  { id: "section 3", topic: "section 3", text: "(...)"}
                ]
              };
            },
            methods: {
              scrollTo(refName) {
                var element = this.$refs[refName];
                var top = element[0].offsetTop;
                this.$refs.sectionText.$el.scrollTo(0, top);
              },
              handleScroll() {
                for (let i = 0; i < this.scrollSpySectionsOffset.length; i++) {
                  if (this.$refs.sectionText.$el.scrollTop > this.scrollSpySectionsOffset[i]) {
                    if (this.$refs.sectionText.$el.scrollTop > this.scrollSpySectionsOffset[i+1]) {
                    } else {
                      this.active = i+1;
                    }
                  }
                }
              }
            },
            mounted() {
              let scrollSpySections = this.$refs.sectionText.$el.children;
              for (let i = 0; i < scrollSpySections.length; i++) {
                let currentOffsetTop = scrollSpySections[i].offsetTop - 16;
                if (!this.scrollSpySectionsOffset.includes(currentOffsetTop)) {
                  this.scrollSpySectionsOffset.push(currentOffsetTop);
                }
              }
            }
          }
        </script>

Warning: file_get_contents(common/gs.html): failed to open stream: No such file or directory in /var/www/html/legacy/vue/5.8.3/index.php on line 143

Warning

/var/www/html/legacy/vue/5.8.3/index.php

143