[Navbar] Hiding navbar on scrolls creates empty space, not reappearing as expected

[luksurious]

Versions
BulmaJS: 0.10.1
Browser: Firefox/Chrome
Operating system: Linux/Windows

Describe the bug
Depending on the point of view, this could be considered bug or enhancement.

Anyway, the problem is in the navbar plugin, if data-hide-on-scroll is activated, using the provided CSS from the docs.

.navbar {
    transform: translateY(0);
    transition: transform 0.2s ease-in-out;
}

.navbar.is-hidden-scroll {
    transform: translateY(-100%);
}

Firstly, if the navbar is either bigger than the default, or the scrolling is controlled in some way more granularly (e.g. via the scroll bars), the navbar is hidden before the point in the layout is reached where the navbar would end if it was not fixed. This will leave a "white space" behind in place of the navbar which is undesirable in certain designs.

Secondly, if the user scrolls back up and the navbar is currently hidden, and with a tolerance setting bigger than a certain threshold (e.g. 5 or 10), the user can scroll back up to the very top of the page via slow, incremental scrolls, without triggering the navbar to reappear, showing just a blank area at the top.

Lastly, maybe a more theoretical issue, the navbar might be hidden before it is sticky if data-sticky-offset is provided. I believe this is not desirable behavior.

To Reproduce
From scrolling up

1. Go to https://jsfiddle.net/jm5g1da6/ , it should be a version with tolerance=10, make sure the preview window is big enough for the navbar to be shown properly
2. Scroll down quickly so that the navbar is hidden.
3. Scroll up gently to the top (small separate scrolls) without triggering the navbar to appear
   No navbar is at the top, only a blank space

When scrolling down

1. Go to https://jsfiddle.net/jm5g1da6/ , it should be a version with tolerance=10, make sure the preview window is big enough for the navbar to be shown properly. Change the tolerance in the HTML to 1.
2. Scroll down just a bit so that the navbar is hidden. Note that the navbar is extra large, and there is a sticky offset defined.
   The navbar is gone and a white space is left in place

Expected behavior
I expect the navbar to disappear only if it is sticky and it should never be hidden if the original navbar area is still visible, even if it is sticky.

Screenshots
Starting point

Hidden navbar at the top

[VizuaaLOG]

Hey luksurious,

I've merged you PR into the 0.10.x branch and published a new 0.10.2 version to NPM. Would you be able write a new section within the navbar docs to explain what this does/how to use it?

If you would prefer not to download/build the docs locally for the extra paragraph, happy for you just write something up and I'll pop it on the docs.

On a side note, how are you finding the existing 0.10 API? Is there anything you're not quite happy with or that could be changed? The master branch is a complete change in the syntax of the API, and honestly not sure if it's the right move or not, so would like to hear what others think of the current system before continuing.

[luksurious]

Hey,

thanks for the merge!

I will write something for the docs in the next days. I had problems building the docs but I can send a PR to the repo in any case.

As for the API, I don't mind the current API, however, I was missing some lifecycle events (for the modal) and accessing the created object for the navbar as it happens automatically. From what I've seen, these things would be coming with the API changes but I didn't go through them properly to really give an opinion on them.

[VizuaaLOG]

That would be brilliant thank you.

So the new API would allow you to grab the Navbar instance using something along the lines of (not final) Bulma('.navbar').data('navbar'). This would return the navbar plugin instance. And the nice thing is a reference is stored on the element itself. So you can fetch it however you like.

And the events is something I'm also focusing on. Ensuring there are events when necessary.

[VizuaaLOG]

I'm closing this issue as I've created one for this on the docs repo. I'll be looking at getting the docs updated for both 0.10 and 0.11 tomorrow, if you have something for this already please let me know. If not I can get the extra section adding.