当我单击“搜索表单”文本框字段时，修复了标题上的位置中断。它只是从页面顶部分离（因为它固定在那里）并在虚拟键盘打开时开始浮动页面中间。
普通的：
破碎的：
问问题
94932 次
7 回答
17
我真的很喜欢这个解决方案（http://dansajin.com/2012/12/07/fix-position-fixed/）。我将它打包成一个小的 jQuery 插件，这样我就可以：
- 设置哪个父母获得班级
- 设置适用于哪些元素（不要忘记“textarea”和“select”）。
- 设置父类名是什么
- 允许它被链接
- 允许多次使用
代码示例：
$.fn.mobileFix = function (options) {
var $parent = $(this),
$(document)
.on('focus', options.inputElements, function(e) {
$parent.addClass(options.addClass);
})
.on('blur', options.inputElements, function(e) {
$parent.removeClass(options.addClass);
// Fix for some scenarios where you need to start scrolling
setTimeout(function() {
$(document).scrollTop($(document).scrollTop())
}, 1);
});
return this; // Allowing chaining
};
// Only on touch devices
if (Modernizr.touch) {
$("body").mobileFix({ // Pass parent to apply to
inputElements: "input,textarea,select", // Pass activation child elements
addClass: "fixfixed" // Pass class name
});
}
编辑：删除不必要的元素
于 2013-11-19T11:16:31.323 回答
11
在我们的例子中，一旦用户滚动，它就会自行修复。所以这是我们用来模拟滚动的修复：
$(document).on('blur', 'input, textarea', function () {
setTimeout(function () {
window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
}, 0);
});
于 2014-07-10T07:22:04.947 回答
4
基于对这个问题的良好分析，我在 css 中的 html 和 body 元素中使用了它：
html,body{
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100% !important;
}
它对我很有用。
于 2018-01-30T07:41:10.960 回答
3
这是一个使用 jQuery 的 hacky 解决方案：
HTML：
<label for="myField">My Field:</label> <input type="text" id="myField" />
<!-- ... other markup here .... -->
<div class="ad_wrapper">my fixed position container</div>
CSS：
.ad_wrapper {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background-color: rgba(0,0,0,0.75);
color: white;
text-align: center;
}
.unfixed {
position: relative;
left: auto;
bottom: auto;
}
JS：
$(function () {
adWrapper = $('.ad_wrapper');
$(document).on('focusin', 'input, textarea', function() {
adWrapper.addClass('unfixed');
})
.on('focusout', 'input, textarea', function () {
adWrapper.removeClass('unfixed');
});
});
于 2014-02-27T22:14:30.090 回答
3
到目前为止，我尝试过的所有解决方案都对我来说失败了：一旦在 iPhone 上显示键盘，固定的顶部导航栏就会消失。如果您希望固定元素即使在显示键盘时也保持固定在同一位置怎么办？下面是一个简单的解决方案，它允许在键盘可见的情况下滚动页面时将固定元素保持在顶部（即焦点仍在输入字段内）。
// Let's assume the fixed top navbar has id="navbar"
// Cache the fixed element
var $navbar = $('#navbar');
function fixFixedPosition() {
$navbar.css({
position: 'absolute',
top: document.body.scrollTop + 'px'
});
}
function resetFixedPosition() {
$navbar.css({
position: 'fixed',
top: ''
});
$(document).off('scroll', updateScrollTop);
}
function updateScrollTop() {
$navbar.css('top', document.body.scrollTop + 'px');
}
$('input, textarea, [contenteditable=true]').on({
focus: function() {
// NOTE: The delay is required.
setTimeout(fixFixedPosition, 100);
// Keep the fixed element absolutely positioned at the top
// when the keyboard is visible
$(document).scroll(updateScrollTop);
},
blur: resetFixedPosition
});
要查看演示，请在您的 iPhone 上访问：
http://s.codepen.io/thdoan/debug/JWYQeN/gakeYJYOXDPk
这是一个使用 的版本requestAnimationFrame，但它似乎并没有表现得更好，所以我坚持使用第一个版本，因为它更简单：
于 2016-07-25T03:04:49.783 回答
1
您需要做的是在用户编辑文本时将正文的位置设置为固定，然后在用户完成后将其恢复为静态。您可以在焦点/模糊（如下所示）上执行此操作，或者如果用户正在打开模式，您可以在模式打开/关闭时执行此操作。
$("#myInput").on("focus", function () {
$("body").css("position", "fixed");
});
$("#myInput").on("blur", function () {
$("body").css("position", "static");
});
于 2016-01-16T00:45:42.567 回答
0
已修复 - 输入搜索文本框后，是否将标题推回相对固定位置。这是 iOS 虚拟键盘实现中的一个错误，因为如果页面可滚动，它会破坏文本字段上的固定位置。如果溢出被隐藏/页面不可滚动，则在执行虚拟键盘时不会破坏固定位置。
干杯。
于 2013-02-26T01:06:33.307 回答