This content originally appeared on Jonnie Hallman (@destroytoday) and was authored by Jonnie Hallman (@destroytoday)
Now that I have all my writing on this blog, which dates all the way back to 2011 (!), I thought I’d clean up the UI a bit. The repetition of the timestamps started to overwhelm the page—especially when the last few dozen posts all share the same year. The obvious solution here is to group posts by year and include a header for each group. That’s simple enough, but I could take one step further to make this more delightful—and useful.
At Stripe, I’ve been on a bit of a sticky nav kick. Most recently, I helped out on the COVID-19 resource page, which includes a sticky nav for the “resources” section. That sticky nav is especially fancy, with a frosted background and a drop shadow that appears once the nav is “stuck”. For my blog index, however, I wanted a subtler approach, which meant less depth.
I decided to carry over a similar technique of styling the nav upon being stuck, but only fading in a border on the bottom to give the posts a hard edge to scroll under. The year-based headers allowed me to remove the years from the posts’ timestamps, which really helped clean up the clutter while putting more emphasis on the titles.
Since I already use a sticky nav for the logo and top-level nav, it felt wrong to show the previous header slide up as the next header stuck to the top. Instead, I faded out both the title and its border once it was done sticking. This helps prevent two borders from being visible at the same time while also giving the previous header a gradual exit—rather than it simply scrolling off the page.
As much as I love the result, I did imagine yet another step I could take where all the years would appear as anchor links aside the stuck header. As you scrolled down the page, they would slide horizontally into position. You could also click them to scroll to that group. I decided to hold back for now, since this was enough of an update for one day, but I don’t think I’ll be able to refrain from this idea for very long.
This content originally appeared on Jonnie Hallman (@destroytoday) and was authored by Jonnie Hallman (@destroytoday)
Jonnie Hallman (@destroytoday) | Sciencx (2020-04-19T21:28:00+00:00) Blog index sticky nav. Retrieved from https://www.scien.cx/2020/04/19/blog-index-sticky-nav/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.