1

I'm using this little jQuery-Plugin in order to enable a smooth scroll to a specific place on the page and also to mark the currently active menu item, so when you scroll down, you see where you are in the menu.

Now I do basically have the exact same code (at least I can't find the difference) as on the GitHub page, but its not working, although on the original template (which I'm using) it's working, so the plugin itself is working fine it seems, but I just can't seem to find the problem.

Basically I have my menu:

<div class="collapse navbar-collapse" id="main-navbar">
  <ul class="navbar-nav mr-auto w-100 justify-content-end clearfix">
    <li class="nav-item active"><a class="nav-link" href="#sliders"> Home </a></li>
    <li class="nav-item"><a class="nav-link" href="#feature"> Features </a></li>
    <li class="nav-item"><a class="nav-link" href="#pricing"> Kosten </a></li>
    <li class="nav-item"><a class="nav-link" href="#contact"> Kontakt </a></li>
  </ul>
</div>

and then I have the different sections/divs, just like so:

<div id="sliders">
  <div class="full-width">
    <!-- light slider -->
    <div id="light-slider" class="carousel slide"><div id="carousel-area">//some content</div></div>
  </div>
</div>

Now the really weird thing is, that scrolling through the navbar works fine, so if I click on contact, for example, it scrolls to the right place. But when I scroll myself, then wrong items are marked, it's always one behind, so if I'm on top, then "Features" is marked, if I've actually scrolled to the features, then the costs are marked, and so on...

You can see this in action here.

Please ignore any faults on not appearing icons, typos or whatever, I'm just testing or just started to develop. On there, you can perfectly check the behavior and also check the ids of the sections/divs, which seem to perfectly fit through (otherwise, the scrolling through navbar shouldn't work).

Anybody can tell about the problem? I don't get it...

nameless
  • 1,483
  • 5
  • 32
  • 78
  • PS. Not to add to your problems or anything, but on my device, if you hit refresh and you're halfway down the page, the background for the navigation is transparent until you start scrolling. The only thing that I know would work is to do a more DIY solution, but then you may encounter other issues, and I haven't had any encounter with such library before, so I apologies that my input is somewhat limited, I see your problem and I like how much information you've provided in your question. – JO3-W3B-D3V Dec 31 '18 at 14:23
  • @JO3-W3B-D3V Yeah, I can see what you mean, actualy I didn't really test it too much on the phone so far. Propably this is, because on the computer, it is transparent and it's intended to be. On the phone, marking is active is not working at all though, but there, I don't feel to bad for it anyway... But yeah, I hope somebody can help me with the problem, as I can't figure out any problem... – nameless Dec 31 '18 at 14:32

0 Answers0