scribble icon indicating copy to clipboard operation
scribble copied to clipboard

make sidebar stay in view while scrolling?

Open zoeeer opened this issue 8 years ago • 3 comments

At first I found it more convenient if the sidebar (containing table of contents and navigation box) stays in view while scrolling the main content.

I tried modifying the related css file (manual-style.css) by changing the "position" attribute from "absolute" to "fixed".

$ git diff
diff --git a/scribble-lib/scribble/manual-style.css b/scribble-lib/scribble/manual-style.css
index 1327c9a..0fcd65b 100644
--- a/scribble-lib/scribble/manual-style.css
+++ b/scribble-lib/scribble/manual-style.css
@@ -182,7 +182,7 @@ a:hover {
 }
 
 .navsettop {
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     margin-bottom: 0;
@@ -393,7 +393,7 @@ a:hover {
 /* Table of contents, left margin */
 
 .tocset {
-    position: absolute;
+    position: fixed;
     float: none;
     left: 0;
     top: 0rem;

But soon I noticed that if the table of contents in the sidebar gets too long while the "position" is "fixed", the sidebar won't scroll at all. So the bottom part of of the sidebar could never be seen.

Is there a way to deal with this? I'm not sure if css can do this, but an idea is to add a floating "go to top of page" button in case that the sidebar is scrolled out of sight. The point is to make it more convenient for users who wants to find and click a link in the table-of-contents within the sidebar.

zoeeer avatar Mar 01 '17 15:03 zoeeer

cc @mbutterick

samth avatar Mar 01 '17 15:03 samth

I don’t love the navigational sidebar, since it’s sort of a ’90s web-design trope. Though I’m open to better ideas, I haven’t come up with one:

  • As you noticed, the sidebar can be any length, so fixing its location won’t work.

  • At one point I tried making the sidebar separately scrollable from the rest of the page, but that felt janky and finicky.

  • Hiding / showing the sidebar with a click or hover feels like a chore.

My best alternative idea has been to move it to the top of the page in a two-column display, and then make it available below as a sort of “HUD” display.

The other longstanding problem is that the sidebar disappears entirely on a narrow display. This is intentional — it doesn’t fit, otherwise — but ultimately I would like to move toward a layout that’s designed from the ground up to work on screens of differing widths (which the original layout was not)

mbutterick avatar Mar 01 '17 18:03 mbutterick

@mbutterick Although I still think it's nice for document reading to have a sidebar showing table of contents, I agree that better alternatives should be considered. There's no better ideas in my head for now. However it's very nice to see you've been planning things on this.

zoeeer avatar Mar 02 '17 01:03 zoeeer