Design: shrink or hide the top navbar when not at top of the page?

[jorisvandenbossche]

From @kvanderwijst at https://github.com/pandas-dev/pandas/issues/28952#issuecomment-547927331

Would it be possible to collapse the header to something much smaller (half the size?) when scrolling down? This leaves more room for the actual content, which is important for smaller screens ( = my laptop).

Vertical screen estate is certainly important! There are several options how to deal with the top navbar:

• always keep it present
• shrink it when scrolling down / not at the top of the page
• hide it when scrolling down / not at the top of the page, and then it could show up again either only when at the top of the page, or when scrolling up ..
• ...

[kvanderwijst]

In documentation pages, I believe the content is often "reusable", in the sense that you often move back up and down to check the documentation, without directly wanting to go to a different page. For this reason, I would vote against a scroll-up navigation bar (except maybe for mobile devices with really smaller screen size).

By shrinking down the size of the header when not at the top of the page, there is no unwanted screen estate lost when scrolling up, while still saving space.

[choldgraf]

FWIW, here's my code for handling the scrollbar in Jupyter Book:

https://github.com/jupyter/jupyter-book/blob/master/jupyter_book/book_template/assets/js/scripts.js#L164

It's not too many lines - basically you just add an eventlistener for "scroll" and check if the new screen location has passed some delta. If so, add a class to the top navbar to hide it, and if not, do nothing. If the scroll is ever up then remove the "hidden" class.

That said, I think a lot of folks prefer a static topbar /shrug

[jorisvandenbossche]

@choldgraf do you have an example of where it is in action? I don't see a special scrolling behaviour on the main website https://jupyterbook.org/intro.html (which is also a jupyter book I suppose)

[choldgraf]

@jorisvandenbossche shrink the page to a narrower width. Feedback I got was that on a laptop or desktop, having the navbar show/hide was a distraction, but that it would be useful if on a tablet or something. So for Jupyter Book the navbar hiding is dependent on the screen size

[mgeier]

In case somebody is interested: I have created an auto-hiding topbar in my Sphinx theme: https://insipid-sphinx-theme.readthedocs.io/ The relevant JavaScript code is in https://github.com/mgeier/insipid-sphinx-theme/blob/master/src/insipid_sphinx_theme/insipid/static/insipid.js.

[12rambau]

Is it still a wanted feature ?

IMO As we are using the navbar to display the first level toctree I think this should be always visible to allow the user to jump from one page to another without being forced to scroll up.