Adjust header position on input focus

I’ve got an extremely long page in a mobile web app that is searchable. On iOS when the search input has focus the headers jumps to the middle of the page.

What I would like to do is make the position absolute and position it at the top of the viewport when the search input has focus and change it back to fixed (at the top of the viewport) when it loses focus (on blur).

This is one of a few things I’ve tried so far.

I’m using bootstrap, and jQuery on PhoneGap/Cordova