Browser hide bar, which is at position: fixed at the bottom of the screen

I have a "account line" attached to the bottom of the screen using position: fixed and I automatically hide it when the user scrolls down the page using a plugin called headroom.js

This works great in every browser except Android Browser (Samsung Galaxy Note 4 runs Kitkat) because the Android browser has its own toolbar at the bottom of the screen that covers mine.

This won't be a problem for most websites because when the user scrolls down the screen the Android browser toolbar disappears, but unfortunately I hide my toolbar when the user scrolls down. When they scroll back again, my toolbar shows, but also the browser toolbar on top of it!

I can't think of this solution, other than that it moves the panel 40px higher so it doesn't get covered. Unfortunately, this would look ridiculous in all other browsers. Another option is browser sniff browser and just don't hide my toolbar, but browser sniff seems old fashioned. However, the invisible floating point toolbar detection feature is not possible.

Any ideas will be very grateful.