android - Phonegap/Cordova jQuery Mobile - Header Disappearing on scroll -
i'm using cordova/phonegap jquery mobile , topcoat.io. on android , ios, when scroll bottom , reach bottom, top navbar gets pushed , disappears. positioning fixed, i'm unsure why happening. on web doesn't this.
any 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; }
put property in toolbar , not hide on scroll:
data-tap-toggle="false"
Comments
Post a Comment