Skip to content

Fix lack of sticky sidebar on "download" page - #339

Open
savetheclocktower wants to merge 2 commits into
mainfrom
fix-sticky-sidebar
Open

Fix lack of sticky sidebar on "download" page#339
savetheclocktower wants to merge 2 commits into
mainfrom
fix-sticky-sidebar

Conversation

@savetheclocktower

Copy link
Copy Markdown
Contributor

Of the three sites (main/blog/docs), this one has the most crowded navigation. I couldn't get away with defining the page header to be an explicit height; I had to make it height: auto between certain breakpoints so that it could cope if the navigation items wrapped to a second line.

The problem with that is that we need to know what sort of top offset to apply to the sidebar. That sidebar is position: sticky and if we do top: 0, it'll fix in place as we scroll down rather than move upward out of view… but some of it will be hidden underneath the page header.

So the top value has to adjust based on the height of the page header.

This was impossible because everything was keying off of the same CSS custom property: --page-header-height. But when --page-header-height was auto, the top calculation failed (top can't be auto, and auto can't have arithmetic done to it!).

The fix is pretty easy and involves a few lines of JS. We want to make --page-header-height be the source of truth for the page header height… but then we want to spy on its height changes so we can define a derived property that is useful for sticky offset calculation. --page-header-height is allowed to be auto, but --actual-page-header-height will always be a specific value that can survive arithmetic.

We actually only need this for the main site. The other two sites have fewer items in their page header navigation, so they haven't run into any scenarios where the explicit height has bitten them. Only on the main site can --page-header-height be a non-numeric value… so it's the only place that needs to introduce a derived property to keep everything glued together.

Testing

Visit https://pulsar-edit.dev/download/ and scroll down. Notice the sidebar navigation should stay on screen, but instead it moves off-screen as you scroll down.

Check out this PR branch and run it locally; the menu will work properly on the same page.

@savetheclocktower

Copy link
Copy Markdown
Contributor Author

I'll give this one a day or two, but it's such a small fix that I'm inclined to land it if nobody takes the bait.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant