如何使页脚图像跳转到移动键盘上

问题描述：

我有一个页脚图像，点击返回到主页。但是，图像应始终可见。所以当移动键盘出现时，图像应该跳到键盘上方。如何使页脚图像跳转到移动键盘上

任何想法如何做到这一点？

编辑：

这里是我的指令累，但手机键盘时会出现图像不向上移动。键盘隐藏图像：

(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代码：

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

你能分享css代码吗？ –

我同意@Rocky，我们需要看看你现在有什么CSS。 – George

你好，我添加了我为粘性图像写的指令。 CSS只包含“position：absolute; right：0; bottom：0;”将图像定位在右下角 – Veela

答

我设法用下面的jQuery移动键盘上方的页脚：

$('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>

如何使页脚图像跳转到移动键盘上

相关推荐