QHeader reveal behaviour

[zanzara]

Why does the reveal prop https://quasar.dev/layout/header-and-footer#reveal-property
react like this, that it shows header instantly again, only when upwards-scrolling was tipped?

I would expect, that header should be shown again, when scrolling is back to top position again?!

On a mobile , this actual behaviour is really annoying for the user. Because only wiping a bit again upwards, does show again the header and steels again pixels to show productive data.

Is this behaviour as intended?

Imo, the cause can be found here ui/src/components/header/QHeader.js:135:

 watch($layout.scroll, scroll => {
      props.reveal === true && updateLocal(revealed,
        scroll.direction === 'up'
        || scroll.position <= props.revealOffset
        || scroll.position - scroll.inflectionPoint < 100
      )
    })

I would appreciate if this could be changed or added as a new prop i.e.
I think this below would be sufficient:

watch($layout.scroll, scroll => {
 props.reveal === true && updateLocal(revealed,scroll.position <= props.revealOffset)
})

at least for my local tests it works as I'd expect it.

Rem.: Ofc the same with Q-Footer

[rstoenescu]

Hi,

This is exactly what reveal is supposed to do. If not that, then you can use a non-fixed header (h instead of H in the “view” prop)

[zanzara]

@rstoenescu Sry, but I think you didn't understood what I meant.
Ofc with h instead of H i have no revealing and header disappears and comes again in linear behaviour with scrolling.

But this is not what I want to achieve.

When I wipe down (until reveal-offset) my main-page scroll in a opaque way under the header.
And when it comes to reveal, then I show a small q-page-sticky there (with only a small icon on the left), instead of the larger q-header with pretty more data.

And now, if user would wipe a little bit upwards again, immediately the full q-header appears.
And this is what I think, not the way the users would expect.

As I proposed above, (in my 2nd code-snippet) is exactly the behaviour what I want to have - and what mobil users of my app would expect. (I tested this change in my app - and it worked fine)