4 ms·

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 6y ago
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/master/src/components/SlidingHeader.vue https://github.com/altrusl/vuesence-sliding-header/blob/mast...
- kevsim 6y ago
  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 6y ago
    When you need two different hiders like here https://www.examtopics.com/exams/ https://www.examtopics.com/exams/ for example
    - mistersquid 6y ago
      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.
    - RobertRoberts 6y ago
      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.
    - skipnup 6y ago
      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.
gitgud 6y ago
Yes, often a tiny bit more knowledge in CSS can save you a lot of trouble in JS (grids, menus, forms etc..).

_altrus 6y ago

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/master/src/components/SlidingHeader.vue https://github.com/altrusl/vuesence-sliding-header/blob/mast...

kevsim 6y ago
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 6y ago
  When you need two different hiders like here https://www.examtopics.com/exams/ https://www.examtopics.com/exams/ for example
  - mistersquid 6y ago
    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.
  - RobertRoberts 6y ago
    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.
  - skipnup 6y ago
    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.

gitgud 6y ago

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