小技巧css解决移动端ios不兼容position:fixed属性,无需插件

本文主要是介绍小技巧css解决移动端ios不兼容position:fixed属性,无需插件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现。但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题。如图:


如何解决:

查阅资料之后想到一下几种解决方法

1,使用position:absolute模拟

<script type="text/javascript">window.οnscrοll=function(){$(".fixed").css("top",$(window).scrollTop());$(".foot").css("top",$(window).scrollTop()+$(window).height());}</script>

问题来了:滑动页面时头部底部div会有明显的抖动。

2,判断当前获得焦点元素是input则隐藏div改为position:absolute

<body οnlοad=setInterval("a()",500)><script type="text/javascript">function a(){if(document.activeElement.tagName == 'INPUT'){    $(".fixed").css({'position': 'absolute','top':'0'}); } else {  $(".fixed").css('position', 'fixed');  }}</script>

问题来了:不停监控dom,消耗资源。如果input个数较少,可在input里面添加onfocus事件好一些。

3,插件iscroll.js个人感觉不是很好用。可能方法不对,jQuery Mobile  没尝试,感觉会增负担。

4,重点来了:

只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;overflow:scroll;就可以实现效果,无需插件。可拷贝下面代码运行。

<!DOCTYPE html><html lang="zh_cmn"><head><meta charset=utf-8 /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /><title></title><style>.head,.foot{position:fixed;left:0;height:38px;line-height:38px;width:100%;background-color:#99CC00;}.head{top:0;}.foot{bottom:0;}.main{position:fixed;top:38px;bottom:38px;width:100%;overflow:scroll;background-color:#BABABA;}</style></head><body><header class="head">顶部固定区域</header><article class="main"  id="wrapper">  <div><p>当内容欲出隐藏时,灰色区域可上下拖动</p><p>当内容欲出隐藏时,灰色区域可上下拖动</p><p>当内容欲出隐藏时,灰色区域可上下拖动</p><p>当内容欲出隐藏时,灰色区域可上下拖动</p><p>当内容欲出隐藏时,灰色区域可上下拖动</p><p>当内容欲出隐藏时,灰色区域可上下拖动</p><p>当内容欲出隐藏时,灰色区域可上下拖动</p><p>当内容欲出隐藏时,灰色区域可上下拖动</p><p>当内容欲出隐藏时,灰色区域可上下拖动</p><p>当内容欲出隐藏时,灰色区域可上下拖动</p><p>当内容欲出隐藏时,灰色区域可上下拖动</p><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br><input type="text" value="" class="inputtext"> <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br></div></article><footer class="foot">底部固定区域</footer></body></html>

当小键盘出现时头部、底部自动跳到页面最顶端、最底端。键盘隐藏时又会固定在头部,底部。顿时感觉开朗了

转载来源:http://blog.csdn.net/liu__hua/article/details/40106595



这篇关于小技巧css解决移动端ios不兼容position:fixed属性,无需插件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/955072

相关文章

Python使用vllm处理多模态数据的预处理技巧

《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一:桌面图标进入方法二:运行窗口进入检查版本号对照表php方法三:查找文件路径方法四:检查 S

Java中的雪花算法Snowflake解析与实践技巧

《Java中的雪花算法Snowflake解析与实践技巧》本文解析了雪花算法的原理、Java实现及生产实践,涵盖ID结构、位运算技巧、时钟回拨处理、WorkerId分配等关键点,并探讨了百度UidGen... 目录一、雪花算法核心原理1.1 算法起源1.2 ID结构详解1.3 核心特性二、Java实现解析2.

Redis出现中文乱码的问题及解决

《Redis出现中文乱码的问题及解决》:本文主要介绍Redis出现中文乱码的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 问题的产生2China编程. 问题的解决redihttp://www.chinasem.cns数据进制问题的解决中文乱码问题解决总结

python删除xml中的w:ascii属性的步骤

《python删除xml中的w:ascii属性的步骤》使用xml.etree.ElementTree删除WordXML中w:ascii属性,需注册命名空间并定位rFonts元素,通过del操作删除属... 可以使用python的XML.etree.ElementTree模块通过以下步骤删除XML中的w:as

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机

深度解析Python装饰器常见用法与进阶技巧

《深度解析Python装饰器常见用法与进阶技巧》Python装饰器(Decorator)是提升代码可读性与复用性的强大工具,本文将深入解析Python装饰器的原理,常见用法,进阶技巧与最佳实践,希望可... 目录装饰器的基本原理函数装饰器的常见用法带参数的装饰器类装饰器与方法装饰器装饰器的嵌套与组合进阶技巧

Python中Tensorflow无法调用GPU问题的解决方法

《Python中Tensorflow无法调用GPU问题的解决方法》文章详解如何解决TensorFlow在Windows无法识别GPU的问题,需降级至2.10版本,安装匹配CUDA11.2和cuDNN... 当用以下代码查看GPU数量时,gpuspython返回的是一个空列表,说明tensorflow没有找到

解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题

《解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题》:本文主要介绍解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4... 目录未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘打开pom.XM

XML重复查询一条Sql语句的解决方法

《XML重复查询一条Sql语句的解决方法》文章分析了XML重复查询与日志失效问题,指出因DTO缺少@Data注解导致日志无法格式化、空指针风险及参数穿透,进而引发性能灾难,解决方案为在Controll... 目录一、核心问题:从SQL重复执行到日志失效二、根因剖析:DTO断裂引发的级联故障三、解决方案:修复