Virtual keyboard and header

Hello,

I am having a rather specific problem. On my website, the home page header (sticky) is set to ‘invisible and appears when scrolling’. What I didn’t realize is that, on tablets, when you for example click on the search icon and then on the text field, the page scrolls to the top (where the field is, I presume)… and the menu disappears. Which is, again, logical, but very impractical.

Would there be a way to solve this issue ? Ideally, I would keep the menu set as is (invisible when on top of the page) ; I was exploring the idea of adding a class to the body/header div when the virtual keyboard is on screen, and force the header to display, but I have problems setting that up. I tried something using JQuery and focus, but it didn’t seem to work… Another option would be to stop the page from scrolling when interacting with a header text field, but I don’t know where to start with that.

Would you have any idea to solve this without having the menu always there, by any chance ?

Cheers !