
Show HN: Vue.js sliding header(s) for top navigation bar - _altrus
https://github.com/altrusl/vuesence-sliding-header
======
hunterhod
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!

~~~
Aeolun
Can just have the header always be visible?

~~~
hunterhod
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.

------
chrismorgan
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.

~~~
_altrus
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/](https://www.examtopics.com/exams/) It
depends on the content

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

~~~
chrismorgan
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`.

------
skipnup
Isn'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
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/](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...](https://github.com/altrusl/vuesence-sliding-
header/blob/master/src/components/SlidingHeader.vue)

~~~
kevsim
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.

~~~
_altrus
When you need two different hiders like here
[https://www.examtopics.com/exams/](https://www.examtopics.com/exams/) for
example

~~~
RobertRoberts
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.

------
onion2k
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.

------
imagetic
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.

