Hacker News Reader

Comment by skipnup | Hacker News Reader

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

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.

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.

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

Reply on news.ycombinator.com