面试题之移动端布局问题

面试题之移动端布局问题 2022-07-30 202

固定定位布局键盘挡住输入框内容 1、通过绑定窗口改变事件,监听键盘的弹出。然后去改变固定定位元素的位置。默认键盘的宽度应该是页面的2分之一。所以我们位移的距离改成键盘的二分之一就可以了

[JavaScript] 纯文本查看复制代码

1 2 3 4 5 6 7 8 9 window.onresize = function(){ //$(".mian")就是固定定位的元素 if($(".mian").css(top).replace(px,) != 0){ $(".mian").css(top,0); }else{ var winHeight = $(window).height(); $(".mian").css(top,-(winHeight/4)); } }

2、通过定时器实时监听是否触发input。如果触发input框就把固定定位，改变成静态定位。这样就会浏览器会总动把内容顶上去

[JavaScript] 纯文本查看复制代码

01 02 03 04 05 06 07 08 09 10 11 12 function fixedWatch(el) { //activeElement 获取焦点元素 if(document.activeElement.nodeName == INPUT) { el.css(position, static); } else { el.css(position, fixed); } } setInterval(function() { fixedWatch($(.mian)); }, 500);

免费搭建微信查券返利机器人来轻松赚佣金

文章来自:IT技术分享网
分享地址:http://www.5ityx.cn/cate100/81835.html

上一篇： .gitignore 文件不生效问题 & 解决方法

下一篇： .gitignore与.git/info/exclude区别

面试题之移动端布局问题

面试题之移动端布局问题 相关内容

聚合标签

面试题之移动端布局问题相关内容