Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Reduce the scroll needed for navbar to change color

anuragd7 free asked 5 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?


Sid26 free answered 4 years ago


top-nav-collapse, is it only for pro pack?


Arkadiusz Idzikowski staff commented 4 years ago

It should work in the free version as well.


TonyO pro answered 5 years ago


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; }


Arkadiusz Idzikowski staff answered 5 years ago


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 free commented 5 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 5 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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.3
  • Device: mac
  • Browser: chrome
  • OS: OSX
  • Provided sample code: No
  • Provided link: No
Tags