ScrollSpy Not Working

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: ScrollSpy Not Working

chrisbowyer pro asked 7 years ago

ScrollSpy only works if I comment out your CSS and JS. Is it a bug or something I have overlooked? Note. I am also changing black to bg-dark after commenting out your CSS and JS. 
Start your code here
<body style="position: relative;" data-spy="scroll" data-target=".navbar-nav"> <!-- Start your project here--> <header> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <a class="navbar-brand" href="/">ScrollSpy Test</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="##navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#one">One</a> </li> <li class="nav-item"> <a class="nav-link" href="#two">Two</a> </li> <li class="nav-item"> <a class="nav-link" href="#three">Three</a> </li> </ul> </div> </nav> </header> <section id="one" style="padding: 65px 15px 1000px"> <p>One</p> </section> <section id="two" style="padding: 65px 15px 1000px"> <p>Two</p> </section> <section id="three" style="padding: 65px 15px 1000px"> <p>Three</p><br> </section> <!-- /Start your project here-->

Mikołaj Smoleński staff answered 7 years ago

Hi Chris, Your example is working after adding some changes. Please follow this steps: 1. Add this to Your stylesheet: .nav-item .active { background-color: rgba(255, 255, 255, .4); } 2. To Your 'ul' element please add: id = "navbar-scrollspy" 3. In Your scripts: $('body').scrollspy({ target: '#navbar-scrollspy' }) Regards

chrisbowyer pro commented 7 years ago

Hi, Mikołaj. Thanks for getting back to me - and so quickly :) As for the issue, it appears you missed the fact that I am using data attributes. In fact, the only thing required to fix the issue was adding the CSS - which ponders the question, shouldn't your stylesheet include this anyway? Alternatively, maybe something in your CSS and or JS is breaking what otherwise works fine when using Bootstrap alone.

Mikołaj Smoleński staff commented 7 years ago

This CSS code is not included to give every client possibility to change active element style as they want. After adding above lines to code, CSS and JS are not breaking.

chrisbowyer pro commented 7 years ago

Fair enough. However, it would be helpful to mention this anomaly in the documentation.

Mikołaj Smoleński staff commented 7 years ago

Thanks for advice. We'll think about it. Regards
Write
Create snippet
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
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
About author
chrisbowyer
Pro User
37Support score
7Questions 2Answers
0Snippets likes 0Snippets