First menu item is always active

Question

First menu item is always active

Closed this issue 7 years ago · 9 comments

On one of our pages, the second article on the page is set as the first article within the navigation.

When I open the page this first menu item is always marked with class="active" even when it is definitely not in the viewport (first article has height: 100vh;).

Is this a bug or a feature that I don't understand?
Looks weird when you open the page and it marks the wrong sections as active.

Answer 1 · 2018-01-11T13:05:04.000Z

It's a bug. We took over most of the code from Sascha and it looks like he assumed that your first article needs to be your first navigation menu point.

We will have a closer look at this in the future. If you have a solution for this, a pull request would be great.

Answer 2 · 2018-01-11T13:12:17.000Z

Ok, thanks for the confirmation.

If we have a solution we will suggest it as a PR!

Answer 3 · 2018-01-11T14:34:40.000Z

We need to find a (theoratical) way to reliably determine which article is the currently active one.

Right now the solution works by checking for scroll position of all articles activated for onepage navigation. IMO this is correct but we need to figure out a way to still find the correct article when there are articles in between that are not covered by the onepage-navigation or in cases like you discribe where the first article is not part of the navigation as well.
There are probably more use cases where the current state doesn't work properly.

Answer 4 · 2018-01-11T16:12:23.000Z

The concept of checking what section is visible in the viewport isn’t so new, right? Maybe we can adapt it in some way? Our fix will be to include the first section in the menu and then set it to display: none, what will hopefully lead to the wanted behavior.

Answer 5 · 2018-01-11T16:14:37.000Z

Maybe the highlightOnScroll feature of http://projects.jga.me/toc/ would be a good blueprint for that?

Answer 6 · 2018-01-11T16:26:15.000Z

You're right, nothing really new, but there are some things you need to take care of. The TOC-Script for example has the problem that the last few menu points will not be highlighted as the containers are to short. Even when you click it, it switches back. And there are more problems when you look into the issues.

You can try to make the extension and the TOC-Script work when you create a the j_onepage_navigation.html5 template and replace the default script with your own settings. Maybe we switch, too.

Answer 7 · 2018-01-11T16:35:34.000Z

We'll try our best!

Answer 8 · 2018-01-19T08:22:46.000Z

I changed this in 42ed347. Can you test this by using the develop branch?

Answer 9 · 2018-01-26T08:03:00.000Z

We already built a hacky solution, so I couldn't verify your fix.
But I will come back to this if we build a new One Pager