Wie Fußzeile Bild Sprung über mobile Tastatur machen

Question

Ich habe eine Fußzeile Bild, die beim Klicken auf die Startseite zurückkehrt. Das Bild muss jedoch immer sichtbar sein. Wenn die mobile Tastatur erscheint, sollte das Bild über die Tastatur springen.

Irgendeine Idee, wie man das macht?

EDITED:

Hier ist die Richtlinie ich müde, aber das Bild nach oben bewegt sich nicht, wenn die mobile Tastatur erscheint. Die Tastatur blendet das Bild:

(function() { 

'use strict'; 

angular 
    .module('TestApp') 
    .directive('stickyText', ['$mdSticky', stickyText]); 

function stickyText($mdSticky) { 
    return { 
     restrict: 'E', 
     template: '<span style="position: absolute; right: 0; bottom: 0;"> <img src="assets/img/icons/home.png" style="width:40px;height:40px;"> </span>', 
     link: function (scope, element) { 
      $mdSticky(scope, element); 
     } 
    } 
} 

})(); 

HTML-Code:

<sticky-text ui-sref="home"> </sticky-text> 

Answer 1

ich es geschafft, die Fußzeile über der Tastatur mit der folgenden jquery zu bewegen:

$('form').on('focus', 'input, textarea', function() { 
     $("footer").addClass('aboveKeyboard'); 
    }); 

    $('form').on('blur', 'input, textarea', function() { 
     $("footer").removeClass('aboveKeyboard'); 
    }); 

CSS:

.aboveKeyboard img{ 
top :30%; 
} 

HTML:

<footer ui-sref="homepg"> 
    <img src="thumb_home.png" style="position: absolute; right: 0;bottom: 0;"> 
</footer>