Reduce the scroll needed for navbar to change color

Topic: Reduce the scroll needed for navbar to change color

anuragd7 asked 6 years ago

I am using the navbar with the class .top-nav-collapse so that the color of the navbar changes when you scroll down the page. I want to reduce the amount of scroll needed for the navbar to change color. How do I achieve that?

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

It's not possible to change the scroll sensitivity in current version. I added this feature to our nice-to-have list and we will add an input for that in the near future.

anuragd7 commented 6 years ago

You seem to have achieved the very effect I need in this template https://mdbootstrap.com/previews/templates/landing-page/html/Landing-Page-Restaurant.html#!

any suggesttions on how to get it to work in a similar way?

Arkadiusz Idzikowski staff commented 6 years ago

We added [scrollSensitivity] input in version 7.5.1. Please use it to reduce the amount of scroll needed for '.top-nav-collapse' class to be added to the navbar.

https://mdbootstrap.com/docs/angular/navigation/navbar/#a-inputs

Add comment

TonyO pro answered 6 years ago

0 0 Best answer

You can adjust the css for the points where you want to adjust the scroll spy function.... this works for me for smooth scroll to stop at the right spot, and scroll spy to change as my section header appears. You may need to tweak it a bit depending on your layout settings

section::before{ display: block; content: " "; margin-top: -80px; height: 80px; visibility: hidden; }

Add comment

Sid26 answered 4 years ago