不过从ios5.1以来，fixed定位就已经支持了，但很遗憾，ios现在对它还只是半支持。

但是在某些情况下，会出现一些比较奇葩的问题，比如fixed元素中存在输入框子元素，这个时候就会跪了。

可以看到，fixed定位的元素跑到中间去了，这种问题一般出现在页面有scrollTop并且输入框获得了焦点的情况下！

怎么解决这种问题呢？我目前知道的主要有三种办法，假设HTML代码结构为：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>fixed</title>

    <style>

        header {

            position: fixed;

        }

    </style>

</head>

<body>

    <header><input type="search" placeholder="请输入搜索词" /></header>

    <div id="container"></div>

</body>

</html>

方法一

在输入框获得焦点时，将fixed改成absolute，并将top值设置为页面此时的scrollTop，然后在输入框失去焦点时，改回fixed。

function onFocus(e) {

    this.main.style.position = 'absolute';

    this.main.style.top = document.body.scrollTop + 'px';

}

function onBlur(e) {

    this.main.style.position = 'fixed';

    this.main.style.top = 0;

}

此外我们还得做一些额外的处理，比如禁止页面滚动，为啥要禁止滚动？

因为软键盘弹起的时候，用户还是可以滚动页面的，一旦用户往下滚动了页面，header也随着往下滚动了（因为此时它是absolute的）。

function onTouchMove(e) {

    e.preventDefault();

    e.stopPropagation();

};

function onFocus(e) {

    this.main.style.position = 'absolute';

    this.main.style.top = document.body.scrollTop + 'px';

    document.body.addEventListener('touchmove', onTouchMove, false);

}

function onBlur(e) {

    this.main.style.position = 'fixed';

    this.main.style.top = 0;

    document.body.removeEventListener('touchmove', onTouchMove);

}

这种方法基本能解决大部分需求，但是在输入框有搜索提示的时候也会挂，因为我们禁止了滚动，而搜索提示通常应该要能往下滚动。

方法二

在输入框的touchstart事件发生时，将fixed元素改成static，然后再将焦点focus到输入框中，然后输入框blur时，再将其设置成fixed:

input.addEventListener('touchstart', function(e) {

    main.style.position = 'static';

    input.focus();

    e.preventDefault();

}, false);

input.addEventListener('blur', function(e) {

    main.style.position = 'fixed';

}, false);

这种方案的原理就是先将fixed元素改成static，这样该元素就会回到页面顶部（正常流），
然后调用输入框的focus方法，将焦点移到输入框中，此时页面视角也会跳到顶部。

Note: 优酷无线首页现在就是这么做的。

方法三

这种方案是将header和container都设置成absolute，然后只滚动container。

这种的方法主要依赖ios5.1以后提供的-webkit-overflow-scrollingcss属性。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>fixed</title>

    <style>

        header {

            position: aboluste;

            height: 45px;

            width: 100%;

        }

        #container {

            position: absolute;

            top: 45px;

            bottom: 0;

            width: 100%;

            overflow: auto;

            -webkit-overflow-scrolling: touch; }

    </style>

</head>

<body>

    <header><input type="search" placeholder="请输入搜索词" /></header>

    <div id="container">

        ...

    </div>

</body>

</html>

这种方案也有坑，主要表现在：当软键盘弹起时，用户一旦滚动界面，整个文档都会滚动（包括header、container），fixed的效果就没有了。

还有一个更深的坑就是，在软键盘弹起的时候，往上滚动页面，header此时也会随着往上滚，
然后收起软键盘，container居然滚动不了（手指多移动几次后，才能正常滚动）。

Note: 这个问题不知道什么原因，以后有发现再更新本文。

综上，我还是喜欢使用第二种方案。

苹果手机里微信不支持position:fixed；

怎么解决：搜索网络，看其他产品是怎么实现的；

解决链接：http://hushicai.com/2014/08/19/ios-fixed-ding-wei-wen-ti.html。

http://blog.csdn.net/liu__hua/article/details/40106595使用方法4。

fixed定位兼容性的更多相关文章

  1. 6s ios9.0平台 微信小程序的fixed定位兼容性问题

    如果不设置top和left的话  就会出现不显示问题

  2. 【原】IOS兼容性之APP内fixed定位头部跳动

    兼容现象: 在App的webview里边,我们有时候会在页面里写自定义头部,会使用到fixed定位,我们想要的效果是,页面无论怎么滑动,这个自定义的头部始终是固定在顶部的,但是在ios 11以上的版本 ...

  3. 相对于父元素的fixed定位的实现

    问题描述 之前在项目中,遇到了一个场景,需要实现相对于父元素的fixed定位:在父元素内拖动滚动条时,"fixed"定位的元素不能滑动,在外层拖动滚动条时,父元素及父元素内的所有元 ...

  4. 38.html----相对于父元素的fixed定位的实现

    之前在项目中,遇到了一个场景,需要实现相对于父元素的fixed定位:在父元素内拖动滚动条时,"fixed"定位的元素不能滑动,在外层拖动滚动条时,父元素及父元素内的所有元素跟着一起 ...

  5. IE11下使用fixed定位时鼠标滚动不平滑

    很久不用IE了,近期做兼容性测试发现一个fixed定位的问题,当元素使用fixed定位时,其应该不随页面滚动,在chrome/firefox/edge下都很完美,元素完全不动,但是使用IE11时,如果 ...

  6. web移动端input获得光标Fixed定位失效解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输 ...

  7. fixed 定位 苹果手机输入框触发时内容全部隐藏

    问题出现在东钿微信公众号用户注册页面 页面中只有两个输入框 页面没有超过一屏,悬浮按钮也要出现在本页面 ,开始布局页面的时候没什么问题,然后我在我自己手机上测试 ,输入手机号码,非常奇怪的问题出现了, ...

  8. 文件正在上传的转圈圈gif图片引出的fixed定位和absolute定位

     文件正在上传的转圈圈gif图片  一.文件上传时,未上传返回成功状态之前给个gif动态图片显示在页面,改善用户体验. <!--S 遮罩层 --> <div id="mas ...

  9. CSS fixed 定位元素失效的问题

    一个示例 考察下面的代码: <head> <title>css filter issue</title> <style> body { height: ...

随机推荐

  1. 类似818tu.co微信小说分销系统设计之多公众号网页授权自动登录源码

    /** 转载请保留原地址以及版权声明,请勿恶意修改 *  作者:杨浩瑞  QQ:1420213383  独立博客:http://www.yxxrui.cn * [后台]http://xiaoshuo. ...

  2. python爬虫--自动获取seebug的poc

    简单的写了一个爬取www.seebug.org上poc的小玩意儿~ 首先我们进行一定的抓包分析 我们遇到的第一个问题就是seebug需要登录才能进行下载,这个很好处理,只需要抓取返回值200的页面,将 ...

  3. Open-Falcon第五步安装Query（小米开源互联网企业级监控系统）

    安装Query query组件,绘图数据的查询接口,query组件收到用户的查询请求后,会从后端的多个graph,查询相应的数据,聚合后,再返回给用户. cd /usr/local/open-falc ...

  4. poj-2287---Tian Ji -- The Horse Racing

    #include<iostream> #include<algorithm> using namespace std; bool cmp(const int,const int ...

  5. [AOP系列]Autofac+Castle实现AOP日志

    一.前言 最近公司新项目,需要搭架构进行开发,其中需要对一些日志进行输出,经过一番查找,发现很多博文都是通过Spring.Net.Unity.PostSharp.Castle Windsor这些方式实 ...

  6. UITableView移除某行的分割线和让分割线宽度为cell的宽度

    1.移除 UITableView 某一行的分割线 所谓移除,其实就是使其偏移出 cell 的显示范围,看不到即移除. 方法1: 移除系统的分割线,自己定义每行的分割线 self.tableView.s ...

  7. Canvas: 优雅的代码作图系列：中国国旗

    Canvas: 优雅的代码作图系列:中国国旗 有很多个这练手的,好的差的都有.这次,我演示下用极客的代码,画出最标准的中国国旗,并详细说明代码是怎么写出来的. 绘制规范: 一.严格按照绘制说明: 二. ...

  8. MapReduce编程之Reduce Join多种应用场景与使用

    在关系型数据库中 Join 是非常常见的操作,各种优化手段已经到了极致.在海量数据的环境下,不可避免的也会碰到这种类型的需求, 例如在数据分析时需要连接从不同的数据源中获取到数据.不同于传统的单机模式 ...

  9. Java 加载、链接、初始化

    JVM 动态地加载.连接.初始化类或接口(在本文之后的篇幅中,我将使用"类"来表示"类和接口").这里我先贴上 Java 虚拟机规范的原文: Loading i ...

  10. 通过反射实现Json数据部分更新JavaBean的属性

    工作中遇到一个需求,根据对方返回Json来更新Java对象.查阅资料,写了个工具类,同时学到了反射获取集合泛型类型.代码里json类库为fastjson public class JsonUtil { ...