I want to create a sticky footer menu for a web application (-webkit/-moz). Check out the screenshot. Blue area border of the iphone, red area representing content, gray area at bottom is footer.
Screen 1:
Start screen. Full content with a sticky footer at bottom of window, I can do this via position: fixed.
Screen 2: Actual Required Behavior
If the content of page is scrolled down the footer should remained stick to the bottom of the window. Thats what I need.
Screen 3: Current behavior with position: fixed
This is the current behavior, if i scroll page the whole thing is moved up including the sticky footer at bottom.
I want a web application, behavior similar to ipod library. Fixed menu at bottom and scroll-able content above it. Any solution?
You would require to take multiple absolute position layers to achieve this. Use window’s resize event adjust these layers. We have done same this in our website http://www.maniartech.com.