Question

单击“搜索表单”文本框字段时，标题上的固定位置中断。它只是从页面顶部分离（当它固定在那里），并在虚拟键盘打开时开始浮动页面的中间位置。

正常：

enter image description here

断裂：

enter image description here

Answer 1

我非常喜欢这个解决方案（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
    });
}

编辑：删除了不必要的元素

Answer 2

在我们的案例中，一旦用户滚动，这将自行修复。所以这是我们用来模拟滚动的修复：

$(document).on('blur', 'input, textarea', function () {
    setTimeout(function () {
        window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
    }, 0);
});

Answer 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');
    });
});

Answer 4

到目前为止，我尝试过的所有解决方案都失败了一个方案：只要键盘显示在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的版本，但它似乎没有更好的表现，所以我坚持使用第一个版本，因为它更简单：

http://s.codepen.io/thdoan/debug/VpvJNX/yYMyLDLBwpRk

Answer 5

您需要做的是在用户编辑文本时将主体的位置设置为固定，然后在用户完成后将其恢复为静态。您可以在焦点/模糊（如下所示）上执行此操作，或者如果用户打开模态，您可以在模态打开/关闭时执行此操作。

$("#myInput").on("focus", function () {
    $("body").css("position", "fixed");
});

$("#myInput").on("blur", function () {
    $("body").css("position", "static");
});

Answer 6

根据这个问题的good analysis，我在css的html和body元素中使用过它：

html,body{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

它对我很有用。

Answer 7

已修复 - 输入搜索文本框后，是否已将黑头推回到相对固定位置。这是iOS虚拟键盘实现中的一个错误，因为它会破坏文本字段IF页面可滚动的固定位置。如果隐藏溢出/页面不可滚动，则在执行虚拟键盘时不会破坏固定位置。

干杯。

iOS iPad键盘打开时固定位置中断

7 个答案: