Sticky HTML & CSS3 Navigation For Hybrid Mobile Applications

1

tech update

© 2015 AgileThought, LLC. All rights reserved. This document is for informationalpurposes only. AgileThought makes no warranties, expressed or implied in this summary.877.514.9180 | agilethought.com |

Sticky HTML5 & CSS3 NavigationFor Hybrid Mobile Applications

SummaryAgileThought delivered a modular, secure, payroll processing system application based on a service-oriented architecture (SOA). It increased system availability to 100%, reduced the average logon time by 83%, shrank the hardware footprint by 50% and cut IT expenses by 50%.

Challenge PresentedThrough the development process the need for both a top and bottom navigation was identified. The challenge was creating this navigation with only HTML5 and CSS3 without the use of a library such as jQuery Mobile. Furthermore, this navigation needed to display and perform flawlessly on all platforms and phones.

Our SolutionThe initial solution and a widely adopted method for creat-ing a sticky header/footer navigation is with the CSS property “position:fixed.” While this works without an issue on desk-top browsers, there are performance issues when testing on smartphones. The bottom navigation “hops” around when scrolling down on a screen as shown to the right.

The solution that proved to perform the best was to utilize the “position:absolute” property for the header, body wrap-per and the footer. This allowed for smooth scrolling with no element jumping or jitters. A user can fluidly step through the application and trigger interactions without noticeable perfor-mance issues.

Final PerformanceThe finished application’s navigation performed well across multiple devices and platforms. By maintaining lightweight HTML5 and CSS3 with minimal Javascript, the application felt exactly like a native application. By taking this lightweight ap-proach, we were able to establish a platform that enabled the use of CSS3 transitions and Google Maps integration with very marginal performance differences.

Fixed position bottom elements

“hop” as user scrolls{

AgileThought is a full-service custom software consulting firm, staffed by the absolute best professionals in the business. Our mission is to fundamentally change the way people, organizations and companies view, approach and deliver software projects.Let Us Help You Succeed 877.514.9180 | sales@agilethought.com

2© 2015 AgileThought, LLC. All rights reserved. This document is for informationalpurposes only. AgileThought makes no warranties, expressed or implied in this summary.877.514.9180 | agilethought.com |

header

.wrapper

nav

header

.wrapper

nav

<header>

<ul>

<li>Card App</li>

<li>

<i class=”icon-signout”></i>

</li>

</ul>

</header>

<section class=”wrapper”>

Content Goes Here!

</section>

<nav>

<ul>

<a href=”#”>

<li class=”current”>

<i class=”icon-home”></i>

</li>

</a>

<a href=”cards.html”>

<li>

<i class=”icon-credit-card”></i>

</li>

</a>

<a href=”rewards.html”>

<li>

<i class=”icon-gift”></i>

</li>

</a>

<a href=”#”>

<li>

<i class=”icon-cog”></i>

</li>

</a>

</ul>

</nav>

header {

clear: both;

background: #2d99af;

height: 55px;

color: #fff;

position: absolute;

left: 0;

top: 0;

width: 100%;

z-index: 999;

}

.wrapper {

position: absolute;

top: 55px;

bottom: 60px;

left: 0;

overflow: auto;

width: 94%;

padding: 0 3% 15px 3%;

}

nav {

height: 60px;

width: 100%;

background: #ebe5e0;

bottom: 0;

left: 0;

position: absolute;

border-top: 1px solid #796c5f;

z-index: 999;

}

Browser rendered UI The HTML5 structure The CSS3 structure

Supporting DetailsVisual of the UI and each section’s corresponding HTML element