滚动的时候,fixed定位的元素消失了

2024-08-24

IOS在滚动的时候fixed消失

前段时间,除了apple发布了新的硬件之外,同步还发布了新的操作系统,IOS11,当大家都将注意力聚焦在那个奇怪的刘海该如何适配的时候,笔者的项目在适配IOS11却出现了其他的问题. 众所周知,IOS在滚动的时候是不能执行js的,这虽然是它内部的实现导致的,也为了解决这一问题,它特地推出的position:sticky属性,来兼容一些对动态设置fixed的场景,不过,当笔者的测试机升级到了IOS11的时候,一切又不一样了: 在ios11上打开滚动以上的页面(如果看不到效果可以访问这个链接),

ios真机使用fixed定位页面滚动时fixed定位的元素也会跟着滚动

到了ios真机APP中,页面向下滚动,fixed的元素也跟着滚,虽然最后它还是到了它该在的地方,但是它跟着滚动也很影响页面的流畅性和交互性好伐.

CSS fixed 定位元素失效的问题

一个示例考察下面的代码: <head> <title>css filter issue</title> <style> body { height: 200vh; background: #ddd; } .container { background: grey; height: 200px; } .fixed { color: red; position: fixed; top: 0; right: 0; } </style> </he

[jQuery]相对父级元素的fixed定位

(function($) { var DNG = {}; //----------------------------------------------------/ // 相对父级元素fixed //----------------------------------------------------/ DNG.parentFixed = function() { // 获得需要fixed定位的元素 var el =$

相对于父元素的fixed定位的实现

问题描述之前在项目中,遇到了一个场景,需要实现相对于父元素的fixed定位:在父元素内拖动滚动条时,"fixed"定位的元素不能滑动,在外层拖动滚动条时,父元素及父元素内的所有元素跟着一起滑动.但是position: fixed是相对于窗口进行的定位,不能直接实现我们需要的效果.在网上搜索看到一个还不错的解决方案,不过利用了CSS3的transform,兼容性不是很好. 解决思路

38.html----相对于父元素的fixed定位的实现

之前在项目中,遇到了一个场景,需要实现相对于父元素的fixed定位:在父元素内拖动滚动条时,"fixed"定位的元素不能滑动,在外层拖动滚动条时,父元素及父元素内的所有元素跟着一起滑动.但是position: fixed是相对于窗口进行的定位,不能直接实现我们需要的效果.在网上搜索看到一个还不错的解决方案,不过利用了CSS3的transform,兼容性不是很好. 解决思路

Vue——解决移动端键盘弹起导致的页面fixed定位元素布局错乱

最近做了一个移动端项目,页面主体是由form表单和底部fixed定位的按钮组成,当用户进行表单输入时,手机软键盘弹起,此时页面的尺寸发生变化,底部fixed定位的元素自然也会上移,可能就会覆盖页面中的某些元素.具体情形,如下图所示(按钮将文字覆盖了): 解决方案: 上面提到,产生这种情况的原因是软键盘弹起,窗口尺寸发生变化,那么就通过监听尺寸的方式解决一下这个问题(当键盘弹出时,将按钮隐藏:键盘收回时,将按钮显示出来): data中声明数据: data() {

fixed定位兼容性

不过从ios5.1以来,fixed定位就已经支持了,但很遗憾,ios现在对它还只是半支持. 但是在某些情况下,会出现一些比较奇葩的问题,比如fixed元素中存在输入框子元素,这个时候就会跪了. 可以看到,fixed定位的元素跑到中间去了,这种问题一般出现在页面有scrollTop并且输入框获得了焦点的情况下! 怎么解决这种问题呢?我目前知道的主要有三种办法,假设HTML代码结构为: <!DOCTYPE html> <html> <head> <meta chars

我是如何通过debug成功甩锅浏览器的：解决fixed定位元素，在页面滚动后touch事件失效问题

如果你关注我应该知道,我最近对PC端页面进行移动适配.在这个过程中,为了节省用户300ms的时间,同时给予用户更及时的点击反馈(这意味着更好的用户体验),我在尝试使用移动端独有的 touchstart 事件替代传统的 click 事件,这过程中我遇到了一些小问题,并成功解决了,你可以通过这篇文章查看具体的情况. 所谓祸不单行,在即将发布上线的时候,我又突然发现使用 touchstart 事件后,移动设备上出现了另一个比较诡异的现象:当用户滚动页面后,原本绑定在fixed定位的navbar元素上的

IE11下使用fixed定位时鼠标滚动不平滑

很久不用IE了,近期做兼容性测试发现一个fixed定位的问题,当元素使用fixed定位时,其应该不随页面滚动,在chrome/firefox/edge下都很完美,元素完全不动,但是使用IE11时,如果使用鼠标滚轮,元素会先随页面一起移动位置,然后再回到原位,产生抖动问题,但用鼠标拖动滚动条时则没问题. 这个问题肯定不是代码问题,问题出在IE设置上,IE11默认开启“平滑滚动”功能,需要手工关闭,具体位置在:Internet选项 >> 高级 >> 浏览 >> 使用平滑滚动

ios 底部用定位 fixed。在软件盘出来后，页面元素被顶上去一部分，fixed定位的footer也跑到了上面去。解决方法

ios 底部用定位 fixed.在软件盘出来后,页面元素被顶上去一部分,fixed定位的footer也跑到了上面去.解决方法 $("input").focus(function(){ $('.footerssss').css({ 'position':'absolute' }) }) $("input").blur(function(){ $('.footerssss').css({ 'position':'fixed' }) setTimeout(function

内联元素于与块元素的转换相对定位、绝对定位以及fixed定位 Z轴覆盖

今天上午学习了内联元素于与块元素的转换个人觉的display:none将元素非常好用,可以配合当鼠标放到这里会出现. 转换成行内元素display: inline; 转换成块元素display:block 将元素隐藏display:none Z轴是对于用户的视角z-index: 50; 下午学习的相对定位.绝对定位以及fixed定位: fixed定位也就是浏览器的浏览页面定位,用处比较大,相对定位和绝对定位处于辅助级, 相对定位:相对于元素本身应该在的位置移动绝对定位:距离父类

安卓弹出键盘隐藏fixed定位相关的元素(obj必须是class)

//安卓弹出键盘隐藏fixed定位相关的元素(obj必须是class) function displayFixed(obj){ var h = document.body.scrollHeight; window.onresize = function(){ if (document.body.scrollHeight < h) { document.getElementsByClassName(obj)[0].style.display = "none"; }else{ doc

【原】IOS兼容性之APP内fixed定位头部跳动

兼容现象: 在App的webview里边,我们有时候会在页面里写自定义头部,会使用到fixed定位,我们想要的效果是,页面无论怎么滑动,这个自定义的头部始终是固定在顶部的,但是在ios 11以上的版本里边,问题来了,当我们快速滑动页面的时候,页面滚动期间,这个fixed定位的头部会随着页面的滑动滑上去,等到上滑动作执行完毕时,头部才又出现.这个问题在安卓及ios11以下的版本都是没有的. 解决: 直接将这个页面控制在一个盒子里边去滑动,头部相对于这个盒子进行绝对定位.但是这样写带来的副作用就是除

解决ie6 fixed 定位以及抖动问题

像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部,不会因为浏览器窗口的缩放和滚动条的滚动而变化,那个肯定是想到的用position:fixed生成绝对定位,只要设置这个CSS属性就能达到刚刚的需求.当其他浏览器都正常显示的时候,只有IE6不那么完美.该元素的位置是通过"left", "top", "right

web移动端input获得光标Fixed定位失效解决方案

移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案. iOS下的 Fixed + Input BUG现象让我们先举个栗子,最直观的说明一下这个 BUG 的现象. 常规的 fixed 布局,可能使用如下布局(以下仅示意代码): <<span>body class="layout-fixed&quo

CSS定位:几种类型的position定位的元素

当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来说,有一些东西会绊倒新手,所以在它成为你的惯用技巧前你需要掌握它们. 一旦你更深入地了解了它是怎么运作的,你就能够做出一些更棒的事情来. CSS盒模型和定位的类型为了搞清楚定位首先你得了解CSS盒模型.在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章.我在那篇文

fixed定位文本框引发的问题

<body>  <main id="J_box">  </main>  <footer id="J_footer"> <input type="text" placeholder="" id=&q

HTML中设置在浏览器中固定位置fixed定位

之前的博文 HTML布局排版之制作个人网站的文章列表,中链接到的文章本身,也需要返回到列表主页,可在每个文章页面加导航条,也可以只加个返回到列表主页的链接.刚开始是想在博文最下方,加个返回文章列表的链接,但是有些博文很长,需要到最下方再返回比较麻烦,如果在每个页面加导航条也可以,但是长博文需要回到上面再点导航条,也有点麻烦.如果有个方法在页面滚动条滚动后,还能让某元素固定在浏览器的固定位置就比较方便了,查看了下css样式里的position定位,里面个fixed定位. 把返回这个链接用fixed

1 background（复合属性）与font（复合属性） 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

1 background(复合属性)与font(复合属性): background: 颜色图片的链接是否平铺背景位置是否滚动.(可以随意调动或省略) Font: 粗度字体风格字体大小/行高字体样式字体大小和样式不可省略 2 行内块的间距问题行内块元素相邻时,行内块元素之间会有几像素的间距,只有通过浮动解决. 3 行内元素的margin 行内元素的上下外边距不起作用,左右起作用. 4 清除浮动给父盒子设置一个高度 Clear: both Overflow

文件正在上传的转圈圈gif图片引出的fixed定位和absolute定位

文件正在上传的转圈圈gif图片一.文件上传时,未上传返回成功状态之前给个gif动态图片显示在页面,改善用户体验.  <div id="mask-div"></div> <div class="download-progress"> <img src="../resource/skin/default/images/thirdPlatform/progress.gif&qu

滚动的时候,fixed定位的元素消失了

热门专题