Topic: Cannot replicate the way scrollspy is working in the mdb angular website in my project
Hi there guys:
I want to implement the scrollspy functionality in exactly the same way it is implemented in this website. Any component demo page has a column on the right with the scrollspy, and even in the scrollspy demo page none of the examples work well in my project because none of them depicts the way it is implemented in the mdb website which is exactly what I want.
I have spent a lot of time in such a "simple" thing and finally I brought several extra pair of eyes to my desktop and none of them could find a way to make it work like in this website. Some of them took it too personal and started a project on their own but still no way to get it to work.
Request:
Add a demo button that implements a simple layout with two columns inside a .row enclosed in a fluid container with the sample code available for copying.
PD: Some examples use a wrapper "scrollspy-example" which limits the height of the element and makes it scrollable "scroll-y: scroll;" so that in there it works but if my elements are all directly in my container inside row > cols grids with no limit of height and the only scrolling thing is the normal page scroll it doesn't work. :( So I am doing it somehow manually.
Dear @Michel
If you want to implement a scroll spy like on our MDBootstrap home page, you have to add some custom stylings.
But don't worry, we'll add this as another example to your docs & code in the nearest future.
Please copy the below code in your app.component.html and styles.scss files:
.html:
<div class="container-fluid">
<div class="row">
<div class="col-md-10 mx-auto">
<section mdbScrollSpyWindow="scrollspy5" id="section1" class="section primary-color"></section>
<section mdbScrollSpyWindow="scrollspy5" id="section2" class="section default-color"></section>
<section mdbScrollSpyWindow="scrollspy5" id="section3" class="section stylish-color"></section>
<section mdbScrollSpyWindow="scrollspy5" id="section4" class="section secondary-color"></section>
<section mdbScrollSpyWindow="scrollspy5" id="section5" class="section deep-purple"></section>
<section mdbScrollSpyWindow="scrollspy5" id="section6" class="section success-color"></section>
</div>
<div class="col-md-2">
<div class="mdb-scrollspy">
<ul mdbScrollSpy="scrollspy5" class="nav d-flex flex-column p-3">
<li class="nav-item py-2"><a mdbScrollSpyLink="section1" class="nav-link" href="#section1">Section 1</a></li>
<li class="nav-item py-2"><a mdbScrollSpyLink="section2" class="nav-link" href="#section2">Section 2</a></li>
<li class="nav-item py-2"><a mdbScrollSpyLink="section3" class="nav-link" href="#section3">Section 3</a></li>
<li class="nav-item py-2"><a mdbScrollSpyLink="section4" class="nav-link" href="#section4">Section 4</a></li>
<li class="nav-item py-2"><a mdbScrollSpyLink="section5" class="nav-link" href="#section5">Section 5</a></li>
<li class="nav-item py-2"><a mdbScrollSpyLink="section6" class="nav-link" href="#section6">Section 6</a></li>
</ul>
</div>
</div>
</div>
</div>
.scss:
.section {
height: 100vh;
}
.mdb-scrollspy {
display: block;
position: fixed;
top: 0 !important;
right: 0;
li {
display: block;
padding: 1rem 1rem;
&:first-child {
padding-top: 0.5rem;
}
&:last-child {
padding-bottom: 0.5rem;
}
a {
&.active {
font-weight: bold;
}
}
}
}
Best Regards,
Damian
Oh yes! this solution works. After a couple of small changes the spy function works well but still clicking on a link navigates out to my /#section_id which I managed to ignore by adding a (click) event to the menu items with a preventDefault() like this:
<liclass="nav-item py-2"><amdbScrollSpyLink="section1"class="nav-link"href="#section1"(click)="doNothing($event)">Section 1</a></li>
doNothing(event: any) {
event.preventDefault();
}There is only one challenge left @Damian Gemza and it is pretty simple. I would like to have a 80px offset so my h2 titles don't hide behind my nav fixed top bar. Any tweak for this to add to the current solution?
Dear Michel,
Please try to use offset input on mdbScrollSpyElement or mdbScrollSpyWindow directives.
In version 7.1.0 there is also a scrollIntoView input for mdbScrollSpyLink directive, which you can set to false to disable navigation on link click.
Regards,
Arek
Michel pro commented 6 years ago
Excellent! I'm looking into those, lets hope we can close this topic and left only for others having the same situation. This solution will really help me keep going with my new SPA version. Thanks for your support.
If I have any other detail to share I will place it here.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.0.0
- Device: MacBook Pro
- Browser: Chrome 70.0.3538.77
- OS: macOS Mojave v10.14.1
- Provided sample code: No
- Provided link: No