固定定位布局 键盘挡住输入框内容
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); |