Show HN: Vue.js sliding header(s) for top navigation bar | Hacker News Reader

Show HN: Vue.js sliding header(s) for top navigation bar

github.com

30 points_altrus19 comments

As other commenters have stated, I think that moving headers are distracting, and am quite frustrated that this has become such a pervasive pattern across the internet. I use the top portion of the viewport to track which line of text I am reading, and having a header flash back and forth makes this difficult.

However, upon mentioning my frustration to a friend in the digital advertising business, she brought up the point that sticky headers save users from the carpal-tunnel inducing action of scrolling all the way to the top of a site in order to take an action (e.g. sign up for a service).

We landed in the middle ground of debouncing sticky headers, i.e. the user should firmly establish their intent to view the top portion of a site by scrolling in that direction for at least one second.

These thoughts aside, great work and thanks for contributing to the industry!

Can just have the header always be visible?

Yes, I agree, this provides the best of both worlds.

I could see a potential argument for increasing screen real estate for content-heavy apps though.

Or collapse it to a hamburger menu in the wide margin where it isn’t going to obscure any text.

I use the “home” button to scroll all the way to the top (on Mac Fn+left-arrow), and Reader Mode to eliminate the superfluous UI.

The demo surprises me because of the blank space between the two headers, so that if you’re scrolling, the first one slides away, and then shortly afterwards the second one slides in. That makes for a lot of movement on screen, and movement is distracting, which is almost always a bad thing in design.

The behaviour if you instantaneously scroll from the top to the bottom (`scrollTo({top:scrollMaxY})` and `scrollTo({top:0})`; to toggle between the two every two seconds, `x=1;setInterval(()=>scrollTo({top:(x=!x)?0:scrollMaxY}),2000)`), where it transitions from one header to the other, is much more what I would expect from something like this. (If you scroll any less than instantaneously, you get a glitch in the animation as it briefly starts hiding one before deciding that no, it should actually just transition to the other.)

If the headers are continuous, and you’re transitioning between them, this sort of thing makes sense, but headers sliding in and out is… risky, at best. I’d strongly recommend against it. I haven’t thought too deeply about this way of expressing it, but I think animations or transitions should almost always go with the grain, that is, in the direction the user is panning. Going against the grain (in which I include the most common examples, 90° and 180°) is distracting. For some personal background so you can see potential biases I may have (though I make this whole comment in good-faith belief about fundamental principles of usability and accessibility), I heartily dislike pages that have content slide in you scroll and they enter the viewport, yet that’s a very common technique on front pages of websites. I find it both distracts and slows me down. Fortunately by disabling JavaScript by default I don’t see many such things ever.

I saw this behavior (with a space between two headers) on some websites so i have implemented that model Sometimes it does make sense - check out this website for example https://www.examtopics.com/exams/ It depends on the content

But anyway both thresholds are customizable. They can be set to one number

CSS sticky would make the effect on that site much smoother IMO as it would just hit the top of the viewport and stick, which is what I tend to see sites like this doing.

The example you give is neither a space between two headers nor reasonable cause for a sliding-in header; it’s just a wildly incorrect implementation of a sticky header from someone that didn’t know how to do it properly, and probably threw together a couple of inapt jQuery scripts. It should be redone to use `position: sticky`.

Isn't just using CSS position: sticky more simple and more beautiful? https://css-tricks.com/position-sticky-2/

Those are just two different logics for website headers - sticky one and mine Again, take a look at this example - https://www.examtopics.com/exams/ I think it's very nice and very good from UX point of view

And for Vue.js guys i advice to take a look at the main and only component to check out how gracefully Vue.js solved this task https://github.com/altrusl/vuesence-sliding-header/blob/mast...

Could you explain the situations in which this is advantageous over CSS sticky? Saying it's "very good from UX point of view" is hard to accept at face value - people want to understand the problem it's solving.

When you need two different hiders like here https://www.examtopics.com/exams/ for example

This will provide 2 headers without the double sliding animation (which is potentially distracting).

1. Stack two headers on top of each other, both of them sticky. (Only topmost header is visible.)

2. At a certain scroll position, fade/scroll/hide the top header.

If all you did was put the second header inside the main element and used position sticky, you'd get the _exact_ same effect without any js and only a couple of lines of CSS.

I don't understand why you'd chose an incredibly more complex solution that is objectively worse in nearly every way.

What am I supposed to see?

On Android Firefox Preview as well as Kiwi Browser (chromium) I simply see a list without anything sticky.

Same for desktop mode in both Android browsers.

Yes, often a tiny bit more knowledge in CSS can save you a lot of trouble in JS (grids, menus, forms etc..).

The component makes an assumption that the element that triggers the second header being displayed can get to a point where it will be at the close enough to the top of the screen. On my 15" Macbook Pro with the screen scaled to 'More space' (eg using 1920x1200 resolution) the text in the demo is wide enough that I don't need to scroll down very far to get to the bottom, and consequently I never see the second header. That's a significant flaw.

I see it take me out of a way to get back to home or the main site a lot, replacing the header/nav with the article title. Visually, and on a single article level, it's really cool, but breaks too many rules.

Reply on news.ycombinator.com