ScrollSpy is not working properly under Firefox on my page

Question

I'm so sorry, for I write a request for you, but I can't fix my page. I read several Howto, Stack Overflow, blog entry about ScrollSpy, but I can't fix my problem. Can anyone help me?

I know, the best way is I copy-paste the page into a code sharing site, but this problem is depending on the full environment. Sorry! I hope! The page: http://eskuvonk.dras.hu/

I have a page with fixed overlay (header), and I want to use the main scrollbar for scroll. The problem is next: Under Chrome, the whole page is working good, but under Firefox, the menu is crazy! Highlights good menu at first scrolls, but after jump immediately the last. Why? I checked the divs in debuggers, the padding, and others are too far for indicate the end of the page.

Please, help me! My wedding is depending on it... :)

Thank you!

Answer 1

You have position: absolute set on your container div -> <div id="streak" class="container">. Remove it and it should work just fine.

#streak {
  position: absolute; /*Remove Me*/
}

This might break the layout of your page a little bit as is, but that is what is causing the issue in FF, so you'll have to clean that up as well.

Answer 2

The final solution was:

• Removed all position: absolute; from any parent node of ScrollSpy inspected anchors.
• Replaced padding-top: 300px; to margin-top: 300px; on body.
• Added margin-top: -300px; padding-top: 300px; to #streak for fix the scrolling.

FYI: The page contains fix positioned, 300px height menubar.