Phonegap/Cordova jQuery Mobile - Header Disappearing on scroll

Question

I'm using Cordova/Phonegap with jQuery Mobile and Topcoat.io. On Android and iOS, when I scroll to the bottom and reach the bottom, the top navbar gets pushed up and disappears. The positioning is fixed, so I'm unsure why this is happening. On the web it doesn't do this.

Any help is much appreciated.

Thanks, Zee

Loading navbars through jQuery

if (content.hasClass("header-top"))
        {
            $("div.topcoat-navigation-bar").remove();
            var colour = content.attr("data-colour");
            // console.log(colour);

            var navbar = $('<div data-position="fixed" class="topcoat-navigation-bar ' + colour + '"><div class="topcoat-navigation-bar__item left quarter"><a id="left-slide-menu-button"><span class="topcoat-icon topcoat-icon--menu-stack"></span></a><a id="nav-logo" href="#table-of-contents-view"><img src="assets/images/logo-123x31.png" /></a></div><div class="topcoat-navigation-bar__item center half"></div><div class="topcoat-navigation-bar__item right quarter"><a id="right-slide-menu-button" href="#search-results-view"><img class="img-35x35" src="assets/images/icons/lookup-definitions-17x17.png" alt="" /></a></div></div>');

            content.before(navbar).toolbar({tapToggle: false});
        }

Topcoat CSS Overwritten

.topcoat-navigation-bar { 
    height: 50px !important; 
    position: fixed !important; 
    width: 100%; 
    z-index: 100; 
    -webkit-transition: left 0.2s ease-out; 
    transform: translate3d(0, 0, 0); 
    -webkit-transform: translate3d(0, 0, 0); 
    box-shadow: 1px 0px 9px #363636 !important; 
    padding-right: 0 !important; 
}

Answer 1

Put this property in the toolbar and it will not hide on scroll:

data-tap-toggle="false"