固定定位被输入法顶上去,该怎么办。

一、固定定位被输入法顶上去,该怎么办。

1、在手机端开发过程可能会遇到这样一个问题：底部有一个固定定位的按钮，然而每次一点击输入框，弹出输入法的时候，这个底部的按钮会随着输入法被顶上去。

2、解决方法是，调用浏览器窗口改变时执行的函数。

3、 console.log("窗口发生改变了哟！");

4、$(window).resize(function(event){

5、 if($('.btns').hasClass('p_static')){

6、$('.btns').removeClass('p_static');

7、$('.btns').addClass('p_static')

8、通过给固定定位切换定位方式来实现，调起输入法时，浏览器窗口发生改变，执行函数，将原先是固定定位的元素改为粘性定位(position:static;)。当关闭输入法时再切换回固定定位。

二、CSS固定定位与粘性定位4大企业级案例

固定定位与粘性定位是CSS中两种重要的定位方式，本文将通过四个案例详细解释它们在实际项目中的应用。

固定定位（Fixed Positioning）是相对于浏览器窗口进行定位的，其特性与绝对定位相似。常见的应用包括：楼梯式导航、浏览器右侧菜单、底部通栏、全屏黑色半透明遮罩弹出层、弹出注册和登录框、以及左上固定右自适应后台管理系统布局。

粘性定位（Sticky Positioning）则在滚动高度超过元素与浏览器高度时，开始以fixed固定定位显示。常见的应用有：吸顶盒导航和滚动吸附效果。

下面分别对四个案例进行详细介绍：

1.**楼梯式导航、浏览器右侧菜单、底部通栏**：这三种场景均使用固定定位来控制元素在浏览器中的位置。楼梯式导航的js部分可能较为复杂，需结合固定定位和相应的动画效果实现。

2.**视频弹窗播放效果**：黑色的半透明遮罩层和弹出的视频均采用固定定位相对于浏览器来控制位置。弹出登录注册框的原理与视频弹窗效果类似。视频弹窗效果的详细源码可作为学习实例。

3.**左边和顶部固定，右自适应后台管理界面布局**：顶部导航和左侧菜单采用固定定位与浏览器固定相关联，而右侧的内容区则根据浏览器宽度自适应布局。

4.**吸顶盒导航和常见左右吸附效果**：尽管粘性定位目前只在部分浏览器（如火狐和Safari）中支持，但在企业开发中应用广泛。开发者通常使用JS来实现这种效果，以提升用户体验。

为了帮助学生高效学习并达到一线互联网大厂前端项目研发要求，特别推出了《30天挑战学习计划》，涵盖了HTML/HTML5、CSS/CSS3、JavaScript、企业项目开发、云服务器部署等多方面内容。该计划包含完整的4大项目开发案例，从理论到实践，全程引导学生实际操作，确保学习与企业需求紧密对接。

学习计划中还包括了使用Git进行版本管理、Markdown记录学习笔记、大厂项目开发标准与规范、多端响应式开发等内容，旨在帮助学生从入门到精通，一次掌握企业项目开发必备技能。

参与学习计划无需额外费用，如有任何疑问或需要加入学习群，请通过指定方式与老师联系。《30天挑战学习计划》由艾编程提供，旨在提供高质量的学习资源与指导，帮助学生顺利掌握Web前端开发技能。