Sticky Footer

ionic-v1
1

Has anyone successfully got a sticky footer to work with an Ionic setup?
Seems to be a bit tricky with the way it works

Any examples or ideas would be greatly appreciated

2

Not sure what you mean about a sticky footer, but this will render a footerbar

ion-pane
  ion-header-bar
  ion-content
  ion-footer-bar

(don’t mind the jade syntax)

3

Thanks man for replying.

Sticky footer as in something like this : http://ryanfait.com/sticky-footer/

On a small screen the footer would be at the bottom of the page, but on a bigger screen the footer would be “fixed” to the bottom.

The only way I can see doing it as of right now is a timeout and do a bit of math against the translate3d position. It wouldn’t be a good fix though, in fact it would be horrible

4

If you put an ion-footer-bar out side of the ion-content, it stays on the bottom of the screen.

3 Likes
5

Just a bit different.

Take my link for example : http://ryanfait.com/sticky-footer/

On a desktop browser, the footer is visible at the bottom of the screen.
Now, if you shrink the browser height to say 500px, the footer is “made hidden” but if you scroll the page down, the footer is still there.

On a large screen, the footer is locked to the bottom of the screen.
On a smaller screen, the footer sits below the content

6

Ahh I see.

Yeah with the way our scrolling works this won’t be possible.
Plus, native apps don’t really do this either. Footers tend to be fixed at the bottom and always visible.

7

Here it is (I guess… I hope).

2 Likes
8

@mhartington - I agree, it’s not a usual native thing

@xAlien95 - I was hoping to refrain from a javascript solution, not sure but it might be a little too painful for older Android devices. Your solution seems to work fine in the browser, I’ll have to give it a shot. Thanks

9

@xAlien95 Thanks for the codepen! I haven’t tested performance on a device yet, but I’ll go with this solution.

An important side note: I just spent a lot of time hunting a bug in your code, since the footer often only came up partially. It turned out that your second translate3d line omits the px. This is the correct way:

footer.style[ionic.CSS.TRANSFORM] = 'translate3d(0,' + reverse + 'px, 0)'
10

For some reason I am getting the following error when I implement this solution:

Uncaught TypeError: Cannot read property ‘scrollTop’ of undefined

Any ideas?