Make book header always visible

[welcome-me]

I am using this theme for a book with long chapters. Scrolling to the top of the page on mobile devices to access the table of contents and site navigation is not user friendly. This PR makes the .book-header sticky so that the site navigation and table of contents can be accessed from any place on the page. 🥳

The header is accessible from partways down the page.

Notes:

• The basic functionality does not require Javascript to work.
• However, Javascript adds the following UX improvements:
  • The Table of Contents is closed when selecting the site navigation. On small devices with a large table of contents, there was no place to tap to close the site navigation menu. By closing the TOC when opening site navigation, we make sure there is a place to tap to close the site navigation.
  • The Table of Contents is closed when tapping a heading. This is done so that the we could set scroll-margin-top to a value that would guarantee the heading was visible at the top of the viewport.

[welcome-me]

@alex-shpak: Here's a live site where this change is implemented.

[welcome-me]

@alex-shpak Is there anything I can do to make this mergeable? This is my second open source contribution, and I've got plenty of enthusiasm. 🚀 I'm happy to communicate if it is something that needs work or you doubt is useful.

[alex-shpak]

Hi! Sorry for waiting, I haven't made my mind yet if I would like to merge it.
I don't mind sticky header for mobile view, but I don't want to add more JavaScript for that :)

I was thinking about some alternative:

1. Find another solution to work around ToC
2. Perhaps instead to have a floating button with scroll-to-top function, tho downside here that it will be over the content.

Well, I'm still thinking.

[alex-shpak]

One another note, I tried to not use borders in layout anywhere, adding floating header will add the border between header and the content 🤔

[welcome-me]

Hi, @alex-shpak . Thank you for sharing your thoughts.

I don't mind sticky header for mobile view, but I don't want to add more JavaScript for that :)

I think I can find a CSS only way to close the TOC when the menu is opened, if you prefer. The sticky header doesn't require JavaScript to use; the JavaScript just makes it smoother. Are you concerned about compatibility with user's devices and that's why you don't want any JavaScript?

I tried to not use borders in layout anywhere

I don't think it looks bad without a border, and I don't mind making that change if you want it.