近日需要实现移动端页面额外功能按钮,即点击加号弹出点赞与留言功能,通常这个按钮都会固定于页面的右下角,首先就想到使用固定定位来实现。

  但是在测试时我们发现,在IOS中,当系统键盘弹出时,fixed会失效,加号按钮会随着键盘的弹出,而被顶到键盘的上方。后来在网上搜索了一下,发现很多开发者都有遇到过这个问题,因为电商网站会有很多这种需要用到固定定位的场景,于是去到淘宝的移动端页面,发现他们是通过使用绝对定位来实现固定定位的效果。方法如下:

页面结构如图

  首先设置一个box,大小等于页面窗口的大小,设置属性position:relative;盒子顶部与底部部分设置好高度,使用position:absolute,分别将top和bottom设为0,中间内容部分的高度通过js动态设置为页面高度减掉顶部和底部栏的高度,并设置为positon:absolute,top等于顶部栏的高度,设置其属性overflow:scroll,另外可再加上

-webkit-overflow-scrolling: touch;可以使中间部分滑动更加顺畅,接近于原生app。最后设置加号按钮的position:absolute,按照需求对其进行定位,此时在滑动页面中间的内容部分时,加号按钮始终处于原来的位置,并且在系统键盘弹出时,也不会影响到它,这样就用绝对定位实现了固定定位的效果。

IOS使用固定定位遇到的问题的更多相关文章

  1. IOS 固定定位底部input输入框,获取焦点时弹出的输入法键盘挡住input

    移动页面经常会做到这样一个效果,看下面的图片,重点就是那个固定定位的底部,里面有个input输入框,在输入字符的时候,安卓手机看着是完全没有问题! 1.页面没有点击底部input的初始状态 2.安卓手 ...

  2. 移动端底部fixed固定定位输入框ios下不兼容

    简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法, ...

  3. iOS 固定定位不兼容、input获取焦点后位置不对。

    第一次写博客~  大家悠着看,有则改之,无则加冕,对不对的给个回复,让我知道你的存在. 在做活动页的时候,经常会碰到一些需要弹出显示的输入框(情节前提:本人安卓机~),前天自己写的时候自己调试没问题后 ...

  4. 移动端— position: fixed;固定定位解决方案

    这里有个关键的东西叫做viewport,你经常在页面的头部里可以见到它: <meta name="viewport" content="width=device-w ...

  5. 理解CSS相对定位和固定定位

    × 目录 [1]相对定位 [2]固定定位 前面的话 一般地,说起定位元素是指position不为static的元素,包括relative.absolute和fixed.前面已经详细介绍过absolut ...

  6. position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  7. 解决ie6下不支持fix属性,模拟固定定位

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  8. Bootstrap 固定定位(Affix)

    来自:慕课网 http://www.imooc.com/code/5396 Affix 效果常见的有以下三种: ☑ 顶部固定 ☑ 侧边栏固定 ☑ 底部固定 固定定位--声明式触发固定定位 Affix ...

  9. Ios开发之定位CLLocationManager

    Ios中的定位功能是通过 Core Location框架实现的.它和地图开发框架是相互独立的.在Core Location中主要实现了定位和地理编码的功能! 下面我们就来介绍一下它的属性,方法和代理方 ...

随机推荐

  1. Linux 切换字符界面和图形界面

    1. 切换方式 # root 权限 systemctl get-default # 获取当前模式 systemctl set-default graphical.target # 设置开机为图形界面 ...

  2. python的paramiko模块的安装与使用

    一:简介 paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接. 由于使用的是python这样的能够跨平台运行的语言,所以所有python支 ...

  3. Razor与HTML混合输出陷阱与技巧

    3,Razor与HTML混合输出陷阱与技巧   属性名称误判 有时候我们必须让html内容与razor语句紧接在一起, eg:      您好,a先生 假设变量名称为ViewBag.Name, 您好, ...

  4. 模板 - 动态规划 - 区间dp

    因为昨天在Codeforces上设计的区间dp错了(错过了上紫的机会),觉得很难受.看看学长好像也有学,就不用看别的神犇的了. 区间dp处理环的时候可以把序列延长一倍. 下面是 $O(n^3)$ 的朴 ...

  5. Python中生成随机数

    目录 1. random模块 1.1 设置随机种子 1.2 random模块中的方法 1.3 使用:生成整形随机数 1.3 使用:生成序列随机数 1.4 使用:生成随机实值分布 2. numpy.ra ...

  6. wordcount作业

    搭档:201631062427,201631062627 代码地址:https://gitee.com/oyyyyyy/wordcount 作业地址: 一: 代码互审情况 我们采用的都是c语言的方式完 ...

  7. codevs1251 括号

    1251 括号  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold       题目描述 Description 计算乘法时,我们可以添加括号,来改变相乘的顺序,比 ...

  8. openinstall渠道统计工具介绍

    大家好,今天给大家介绍一下如何使用openinstall 来实现APP 渠道统计,做运营推广的朋友应该对渠道统计并不陌生,之前一般都是让技术的同事打渠道包方式进行渠道统计,而且只有安卓才能打渠道包.o ...

  9. 关于Struts漏洞工具的使用

    最新struts-scan资源: https://www.cesafe.com/3486.html 一,将资源下载后,放入liunx系统中,并且需要具备python2的操作环境 二,打开终端使用如下命 ...

  10. ios 类似淘宝评论星星功能

    创建星星视图: //星星 _myview = [[UIView alloc]initWithFrame:CGRectMake(95, 5, 200, 50)]; UIPanGestureRecogni ...