Scroll Spy
Vue Bootstrap Scroll Spy - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
The v-mdb-scroll-spy directive shows on navigation list
current scroll position (the default reference container is window). 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 - you can modify this behaviour by passing custom
callback function.
The directive is collecting href attributes from the
component it's attached to - it can be used with a variety of components
such as mdbNavbar, mdbListGroup and more. It offers the following
customization options:
-
container - by default its value is set to
window. The directive selects the element with the given ID as the reference container - visible - the part of the section which needs to be visible in order to activate the corresponding link. Accepts values from 0 to 1 (the default value is 0.5)
- callback - name of the method which will be called with the active link's index once it changes
-
loading - option available with the
asyncmodifier - chnaging its value fromtruetofalsewill trigger recalculating scrollspy
Adding the .async
loading value.
Basic usage
Step 1: Import the directive from 'mdbvue'
<script>
import { mdbScrollSpy } from "mdbvue";
</script>
Step 2: Add mdbScrollSpy to the
directives object
<script>
import { mdbScrollSpy } from "mdbvue";
export default {
directives: {
mdbScrollSpy
}
};
</script>
Step 3: Attach the directive to the navigation container
<template>
<ul v-mdb-scroll-spy>
<li><a href="...">Link 1</a></li>
</ul>
</template>
Step 4: If you want to use the ScrollSpy on a certain container or specify the custom callback, pass an object as the directive's value. The method will be called with a href's index as an argument.
<template>
<div>
<ul
v-mdb-scroll-spy="{container: 'custom-container', callback: 'customCallback'}"
>
<li><a href="#section-1">Section 1</a></li>
</ul>
<div
id="custom-container"
style="max-height: 100px; overflow-y: scroll;"
>
<p id="section-1">...</p>
</div>
</div>
</template>
<script>
import { mdbScrollSpy, mdbBtn } from "mdbvue";
export default {
directives: {
mdbScrollSpy
},
methods: {
customCallback(i) {
//...
}
}
};
</script>
Tabs example MDB Pro component
To change the reference container from the window, pass the ID
as the value of the container.
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.
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.
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.
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.
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.
<template>
<section>
<mdb-tab
tabs
card
justify
color="default"
class="mt-4 mx-4"
v-mdb-scroll-spy="{ container: 'scroll-container' }"
>
<mdb-tab-item
v-for="(section, i) in sections"
:key="i"
:href="`#${section.id}`"
:active="tabs === i"
@click.native="tabs = i"
>{{ section.topic }}</mdb-tab-item
>
</mdb-tab>
<div
id="scroll-container"
class="mt-5 mx-4"
style="max-height: 300px; overflow-y: scroll;"
>
<div v-for="(section, i) in sections" :key="i" :id="section.id">
<h3>{{ section.topic }}</h3>
<p>{{ section.text }}</p>
</div>
</div>
</section>
</template>
<script>
import { mdbTab, mdbTabItem, mdbScrollSpy } from "mdbvue";
export default {
name: "ScrollSpyProPage",
components: {
mdbTab,
mdbTabItem
},
data() {
return {
tabs: 0,
sections: [
{
id: "section1",
topic: "section 1",
text:
"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. 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. 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. 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."
},
{
id: "section2",
topic: "section 2",
text:
"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. 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. 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. 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. 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. 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."
},
{
id: "section3",
topic: "section 3",
text:
"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. 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. 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. 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."
}
]
};
},
directives: { mdbScrollSpy }
};
</script>
Example with list-group
Item 1
Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
Item 2
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.
Item 3
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
Item 4
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
<template>
<mdb-container>
<mdb-row>
<mdb-col sm="4">
<mdb-list-group
v-mdb-scroll-spy="{ container: 'container', callback: 'setActive' }"
class="scrollspy"
>
<mdb-list-group-item
action
:active="i === active"
tag="a"
:href="`#${section.id}`"
v-for="(section, i) in scrollSections"
:key="section.id"
>
{{ section.title }}
</mdb-list-group-item>
</mdb-list-group>
</mdb-col>
<mdb-col>
<div
class="z-depth-1 p-5"
id="container"
style="height: 500px; overflow-y: scroll"
>
<div
v-for="section in scrollSections"
:id="section.id"
:key="section.id"
>
<h5>{{ section.title }}</h5>
<p>{{ section.content }}</p>
</div>
</div>
</mdb-col>
</mdb-row>
</mdb-container>
</template>
<script>
import {
mdbContainer,
mdbRow,
mdbCol,
mdbListGroup,
mdbListGroupItem,
mdbScrollSpy
} from "mdbvue";
export default {
name: "ScrollSpyPage",
components: {
mdbContainer,
mdbRow,
mdbCol,
mdbListGroup,
mdbListGroupItem
},
data() {
return {
active: 0,
nav: 0,
scrollSections: [
{
id: "section1",
title: "First title",
content:
"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. 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. 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. 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."
},
{
id: "section2",
title: "Second title",
content:
"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. 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. 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. 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. 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. 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."
},
{
id: "section3",
title: "Third title",
content:
"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. 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. 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. 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."
}
]
};
},
methods: {
setActive(i) {
this.active = i;
}
},
directives: { mdbScrollSpy }
};
</script>
MDB Scrollspy MDB Pro component
Section 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ipsa at provident qui doloremque libero quo non pariatur quaerat iure, nostrum, possimus vitae sequi officiis quasi dolores asperiores earum quis!
Subsection 1A
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ipsa at provident qui doloremque libero quo non pariatur quaerat iure, nostrum, possimus vitae sequi officiis quasi dolores asperiores earum quis!
Subsection 1B
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ipsa at provident qui doloremque libero quo non pariatur quaerat iure, nostrum, possimus vitae sequi officiis quasi dolores asperiores earum quis!
Subsection 1C
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ipsa at provident qui doloremque libero quo non pariatur quaerat iure, nostrum, possimus vitae sequi officiis quasi dolores asperiores earum quis!
Section 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ipsa at provident qui doloremque libero quo non pariatur quaerat iure, nostrum, possimus vitae sequi officiis quasi dolores asperiores earum quis!
Subsection 2A
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ipsa at provident qui doloremque libero quo non pariatur quaerat iure, nostrum, possimus vitae sequi officiis quasi dolores asperiores earum quis!
Subsection 2B
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ipsa at provident qui doloremque libero quo non pariatur quaerat iure, nostrum, possimus vitae sequi officiis quasi dolores asperiores earum quis!
Subsection 2C
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ipsa at provident qui doloremque libero quo non pariatur quaerat iure, nostrum, possimus vitae sequi officiis quasi dolores asperiores earum quis!
<template>
<mdb-container>
<mdb-row>
<mdb-col sm="4" lg="3">
<mdb-navbar
:toggler="false"
class="z-depth-0"
id="mdb-scrollspy-ex"
>
<mdb-navbar-nav
vertical
v-mdb-scroll-spy="{
container: 'mdb-scrollspy-container',
callback: 'setActiveLink',
visible: 0.2
}"
class="nav-pills default-pills"
>
<mdb-nav-item
href="#section-1"
:active="
nested === 0 || nested === 1 || nested === 2 || nested === 3
"
>Section 1</mdb-nav-item
>
<mdb-navbar-nav vertical>
<mdb-nav-item
:active="nested === 1"
class="ml-3 my-1"
href="#subsection-1a"
>Subsection 1A</mdb-nav-item
>
<mdb-nav-item
:active="nested === 2"
class="ml-3 my-1"
href="#subsection-1b"
>Subsection 1B</mdb-nav-item
>
<mdb-nav-item
:active="nested === 3"
class="ml-3 my-1"
href="#subsection-1c"
>Subsection 1C</mdb-nav-item
>
</mdb-navbar-nav>
<mdb-nav-item
href="#section-2"
:active="
nested === 4 || nested === 5 || nested === 6 || nested === 7
"
>Section 2</mdb-nav-item
>
<mdb-navbar-nav vertical>
<mdb-nav-item
:active="nested === 5"
class="ml-3 my-1"
href="#subsection-2a"
>Subsection 2A</mdb-nav-item
>
<mdb-nav-item
:active="nested === 6"
class="ml-3 my-1"
href="#subsection-2b"
>Subsection 2B</mdb-nav-item
>
<mdb-nav-item
:active="nested === 7"
class="ml-3 my-1"
href="#subsection-2c"
>Subsection 2C</mdb-nav-item
>
</mdb-navbar-nav>
</mdb-navbar-nav>
</mdb-navbar>
</mdb-col>
<mdb-col sm="8" lg="9">
<div
class="z-depth-1"
style="max-height: 325px; overflow-y: scroll;"
id="mdb-scrollspy-container"
>
<div class="blue lighten-4 p-3">
<h4 id="section-1">Section 1</h4>
<p>
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.
</p>
<div id="subsection-1a" class="red lighten-4 p-3 mt-3">
<h5>Subsection 1A</h5>
<p>
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.
</p>
</div>
<div id="subsection-1b" class="green lighten-4 p-3 mt-3">
<h5>Subsection 1B</h5>
<p>
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.
</p>
</div>
<div id="subsection-1c" class="indigo lighten-4 p-3 mt-3">
<h4>Subsection 1C</h4>
<p>
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.
</p>
</div>
</div>
<div class="blue lighten-4 p-3">
<h4 id="section-1">Section 2</h4>
<p>
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.
</p>
<div id="subsection-2a" class="red lighten-4 p-3 mt-3">
<h5>Subsection 2A</h5>
<p>
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.
</p>
</div>
<div id="subsection-2b" class="green lighten-4 p-3 mt-3">
<h5>Subsection 2B</h5>
<p>
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.
</p>
</div>
<div id="subsection-2c" class="indigo lighten-4 p-3 mt-3">
<h4>Subsection 2C</h4>
<p>
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.
</p>
</div>
</div>
</div>
</mdb-col>
</mdb-row>
</mdb-container>
</template>
<script>
import {
mdbContainer,
mdbRow,
mdbCol,
mdbNavbar,
mdbNavbarNav,
mdbNavItem,
mdbScrollSpy
} from "mdbvue";
export default {
name: "ScrollSpyProPage",
components: {
mdbContainer,
mdbRow,
mdbCol,
mdbNavbar,
mdbNavbarNav,
mdbNavItem
},
data() {
return {
nested: 1
};
},
methods: {
setActiveLink(i) {
this.nested = i;
}
},
directives: { mdbScrollSpy }
};
</script>
<style>
#mdb-scrollspy-ex .nav-item {
width: 100%;
}
#mdb-scrollspy-ex a {
font-size: 0.8rem;
font-weight: 400;
line-height: 1.1rem;
padding: 0 5px;
margin-top: 3px;
margin-bottom: 3px;
color: black;
}
#mdb-scrollspy-ex li .active {
font-weight: 600;
}
.mdb-scrollspy-ex-example {
height: 200px;
}
</style>
Dotted Scrollspy MDB Pro component
<template>
<section>
<div class="dotted-scrollspy">
<ul
class="pl-0 clearfix d-none d-sm-flex flex-column"
v-mdb-scroll-spy="{ visible: 1 }"
>
<li class="nav-item">
<a class="nav-link" href="#dot-1"><span></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#dot-2"><span></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#dot-3"><span></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#dot-4"><span></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#dot-5"><span></span></a>
</li>
</ul>
</div>
<div id="dot-1" class="blue" style="height: 40vh;"></div>
<div id="dot-2" class="blue lighten-1" style="height: 40vh;"></div>
<div id="dot-3" class="blue lighten-2" style="height: 40vh;"></div>
<div id="dot-4" class="blue lighten-3" style="height: 40vh;"></div>
<div id="dot-5" class="blue lighten-4" style="height: 40vh;"></div>
</section>
</template>
<script>
import { mdbScrollSpy } from "mdbvue";
export default {
directives: { mdbScrollSpy }
};
</script>