#1319 Make the position of the search box in the nav sidebar "sticky"

[ErsatzCulture]

This is a new ticket to supercede previous discussion that was (probably wrongly on my part) added to an old ticket: https://sourceforge.net/p/isfdb/feature-requests/466/

There's also some brief discussion on the community portal page of the wiki: http://www.isfdb.org/wiki/index.php/ISFDB:Community_Portal#Proposed_change:make_the_position_of_the_search_box_in_the_nav_sidebar.22sticky.22

As of Nov 2019, there's a demo of the proposed functionality on my personal webspace at https://sf.ersatzculture.com/temp/search.html - but this is liable to get deleted sooner or later.

Summary of the problem

On a long ISFDB page (e.g. search results for a term that finds many matches), if you scroll down the page, click on a link, then hit back, you will be returned to the first page right at the top, rather than at the point down the page you left it (as is the expected browser behaviour).

The cause is that there is JavaScript that explicitly focusses on the search field (or other input fields on certain other pages, although those are not in scope for this ticket), and because that field is at the top of the page, the browser jumps back there.

Note: this behaviour only occurs when JS is enabled; with it disabled, the page behaves as any other web page.

Summary of the proposed solution

CSS position: sticky; has supported in mainstream browsers since 2016 or earlier. The demo uses this to cause the search box to remain on screen even if its default location has scrolled off the top of the page.

One slight complication: because the search area is contained within the grey sidebar div, even with position: sticky, it will scroll off the page when the containing sidebar div scrolls off the screen. The proposed solution is to make the sidebar div extend to the full height of the main div (assuming the main div is indeed taller than the sidebar ). Currently this space is empty, so there should be no objection - whether aesthetic or technical - to making the sidebar the full height of the main div.

The demo uses a container element around the sidebar and main divs using display: flex to cause both the inner divs to have the same height. This has been supported in browsers since 2012. Note that the demo has minor tweaks to the margin/padding of the main div due to it now being in the container elements.

An alternative solution might be to manually set the sidebar height in JavaScript to match the height of the main div. Because the problem only occurs when JS is enabled, having this solution be JS-only isn't a problem.

There may also be pure CSS solutions using pre-flexbox concepts, but I'm not inclined to hunt around for them.

** Issues raised **

I believe there have been no objections to the concept of this proposed change, just concerns about compatibility with older browsers and/or browsers without JavaScript enabled.

Ahasuerus provided some data from the Apache logs about the top browsers visiting ISFDB over the past few days, I will analyse this to see what proportion of (non-bot) visitors use potentially affected browsers.

If it looks like all visitors are using (reasonably) new browsers, then I would proposed the position:sticky + flexbox solution.

If old browsers are an issue, then i would propose position: sticky + JavaScript height setting.

Note that browsers that don't support position: sticky should just ignore that CSS directive and retain the current behaviour - it's only the support for flexbox that's of concern.

[ErsatzCulture]

Just a ping to say that I haven't forgotten about this, I've just been preoccupied with other personal projects that are more time-critical...

[Ahasuerus]

No worries! I have been sick the last few weeks and in no shape to work on development either.