Hacker News Reader

Comment by _altrus | Hacker News Reader

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

View on HN

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.

Reply on news.ycombinator.com