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

Question

修复了当我单击“搜索表单”文本框字段时标题上的位置中断问题。它只是从页面顶部分离(因为它固定在那里)，并在虚拟键盘打开时开始 float 在页面中间。

正常:

损坏:

Answer 1

我真的很喜欢这个解决方案( http://dansajin.com/2012/12/07/fix-position-fixed/ )。我将它打包成一个小 jQuery 插件，这样我就可以:

• 设置哪个家长获得类(class)
• 设置这适用于哪些元素(不要忘记“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
    });
}

编辑:删除不必要的元素