Question

我正在使用Angular JS，Bootstrap和Jquery开发一个应用程序。我创建了一个固定的页脚，它在整个应用程序中按预期工作。但是当我点击移动浏览器上的输入框时，页脚会移动到屏幕中心。

这是css：

.footer{
    bottom: 0;
    padding: 10px 15px;
    position: fixed;
    width: 100%;
}

我尝试将页脚属性更改为位置：绝对和显示：无输入焦点。这是代码：

$(document).on('focus', '[type=text], [type=password], [type=number]', function (e) {
    $(".footer").css("position","absolute");
    $(".footer").css("display","none");
});

$(document).on('blur', '[type=text], [type=password], [type=number]', function (e) {
    $(".footer").css("position","fixed");
    $(".footer").css("display","block");
});

它适用于Iphone 5和5s等少数设备，但在其他设备上没有成功，如Ipad，Iphone 4等。任何帮助都会非常感激。

Answer 1

我发现position: fixed的页脚通常不会按照您希望的方式运行。我不知道如何构建HTML，但您可以考虑使用position: absolute。

在下面的笔中，我做了一个小例子，说明当我在页面底部需要固定页脚时我通常会做的事情。

https://codepen.io/Rennie/pen/dvVGGJ

我不建议使用Javascript / JQuery来修复样式问题，特别是不是JQuery，因为这不是'Angular方式'。请参阅"Thinking in AngularJS" if I have a jQuery background?作为原因。

Bootstrap固定页脚移动

1 个答案: