Make navbar stick and scrollable

[wilbowma]

This helps with navigation of long docs pages. For an example, see: https://www.students.cs.ubc.ca/~cs-411/docs/reference/sets.html?q=sets

[mflatt]

In my browser (Firefox on Mac OS), I can't scroll all the way to the bottom. By making the 88% smaller, I can scroll to the end. Is there a replacement for 88% that will make this work more?

[wilbowma]

I started with 80%, which worked but was ugly. It's a magic number and if anyone knows more about CSS than me, I'm sure there's a better way.

[bhrgunatha]

I like this idea!

I'm using Firefox 86.0 on linux and I have my browser configured with a minimum font size of 18px so the text may look different but I don't think that affects the scrollbar visibility.

The scroll bar appears to be applied to the full container of the navigation at the left side which means for longer lists it's initially hidden behind the search form at the top of the navigation section.

Once you scroll the content list somewhat it suddenly appears

I think the scrollbar needs to be applied to the list of contents, not the full left hand side.

[mydoghasworms]

@wilbowma Well done; this is just as I hoped it would be.

Of course, it would be nice for it to be responsive, i.e. to hide the TOC on smaller displays like mobile devices.

Hopefully your change gets merged and/or someone can make the necessary responsive fixes.

[wilbowma]

@wilbowma Well done; this is just as I hoped it would be.

Of course, it would be nice for it to be responsive, i.e. to hide the TOC on smaller displays like mobile devices.

Hopefully your change gets merged and/or someone can make the necessary responsive fixes.

The TOC now hides itself on the phone/tablet display; that was just an error in the deployed example.

I like this idea!

I'm using Firefox 86.0 on linux and I have my browser configured with a minimum font size of 18px so the text may look different but I don't think that affects the scrollbar visibility.

The scroll bar appears to be applied to the full container of the navigation at the left side which means for longer lists it's initially hidden behind the search form at the top of the navigation section.

Once you scroll the content list somewhat it suddenly appears

I think the scrollbar needs to be applied to the list of contents, not the full left hand side.

Fixed this I think.

[wilbowma]

In my browser (Firefox on Mac OS), I can't scroll all the way to the bottom. By making the 88% smaller, I can scroll to the end. Is there a replacement for 88% that will make this work more?

Okay, a little Googling suggests to set the top and bottom to 0 rather than the height. It looks better now for me and without magic numbers. Does this fix it for you?

[mflatt]

This works well for me!

[rfindler]

This works great for me in Safari (I checked "responsive design mode" which shows a lot of differently sized browsers and they all work).

In Chrome it is like the old way, where the table of contents isn't scrollable.

[wilbowma]

In Chrome it is like the old way, where the table of contents isn't scrollable.

Can't reproduce. https://www.students.cs.ubc.ca/~cs-411/docs/reference/sets.html?q=sets looks right to me on google-chrome-88.0.4324.182-1 and chromium-88.0.4324.182-1, on linux.

[rfindler]

This is with an up-to-date version of chrome under mac os.

https://user-images.githubusercontent.com/399024/109199603-42bcbe00-7765-11eb-85d9-eac6d96f848d.mov

[rfindler]

It works like this on safari (same machine) and I think this is how it is supposed to look.

https://user-images.githubusercontent.com/399024/109209957-cda3b580-7771-11eb-9358-d642253ae103.mov

[wilbowma]

Very strange. I'll see about breaking on my macOS machine and debugging. What version macOS?

[rfindler]

I'm using Mojave (10.14.6).

[wilbowma]

Okay I just tried this on 10.14.6 with freshly installed Chromium, and it works as expected. Do you for some reason have an old version of my website cached in Chrome?

[rfindler]

oh! I should have thought of that. It works now..... sorry about that.

[wilbowma]

No worries. I should have thought of it earlier, but I couldn't imagine why you'd have reason to visit my class site.

[rfindler]

Looks like this doesn't always work. For example, with this scribble code in x.scrbl:

#lang scribble/manual
@title{Title}

and this command line:

scribble --dest x --html x.scrbl

I see this output:

but in 8.0 I see this output:

The little white rectangle should probably be grey. Maybe this is because something needs tweaking for the case where the search doesn't appear on the page?

[wilbowma]

In 8.0.0.9 I see the expected output; will continue debugging