3 ms·
Show HN: Vue.js sliding header(s) for top navigation bar
- chrismorgan 6y agoThe 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.
- _altrus 6y agoI 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/ https://www.examtopics.com/exams/ It depends on the content But anyway both thresholds are customizable. They can be set to one number
- kevsim 6y agoCSS 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.
- chrismorgan 6y agoThe 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`.
- skipnup 6y agoIsn't just using CSS position: sticky more simple and more beautiful? https://css-tricks.com/position-sticky-2/ https://css-tricks.com/position-sticky-2/
- _altrus 6y agoThose are just two different logics for website headers - sticky one and mine Again, take a look at this example - https://www.examtopics.com/exams/ 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/master/src/components/SlidingHeader.vue https://github.com/altrusl/vuesence-sliding-header/blob/mast...
- kevsim 6y agoCould 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.
- _altrus 6y agoWhen you need two different hiders like here https://www.examtopics.com/exams/ https://www.examtopics.com/exams/ for example
- mistersquid 6y agoThis 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.
- RobertRoberts 6y agoIf 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.
- hunterhod 6y agoAs 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!
- onion2k 6y agoThe 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.
- imagetic 6y agoI 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.