I am creating a progressive web app with Vue, and one of the issues I am running into regards the scroll animations found on (mostly) mobile browsers. IOS has the rubber band effect, and Android recently added something similar.

I am aware that I can turn those effects off entirely, (as described here Take control of your scroll - customizing pull-to-refresh and overflow effects) but that's not what I want. I would like to have these overflow effects enabled, but they should not affect my fixed navigation bar.

As an example, it seems that Pitchfork's review page has a similar issue to the one I am describing (on Chrome Mobile, Android 12). When you hit the top of the page, the bottom navbar dips below the bottom of the screen.

Is there any way to really fix a navigation bar to the bottom, regardless of what scroll animations might take place on the body?