今天做项目遇到一个问题。鼠标滚动到指定长度后,理想状况是菜单吸附到顶部。但是实际上在一些页面上会造成抖动。定位之后发现。window.pageYoffset值会变成0

搜索一些资料后发现。因为fixed定位后,这个div 就已经脱离文档流了。window.pageYoffset指的是document元素距离视窗的距离。所以导致window.pageYoffset变成了0

解决办法:

假设我们把fixed定位的div为divA, 那么在divA下面再写一个占位的div B,它的高度和divA一致,visible设为隐藏。用于占位文档流。这样就不会造成样式混乱了。

position:fixed 造成页面抖动解决办法的更多相关文章

  1. 解决ie6不支持position: fixed;导致无法滚动的办法

    <div id="im" style="top: 100px; position: fixed; left: 5px; border: 3px solid #006 ...

  2. python print 打印的数据包含中文,打印报错UnicodeDecodeError: 'gbk' codec can't decode bytes in position 459-460: illegal multibyte sequence解决办法

    python 2.7 print 的数据中若包括中文,打印则会报错UnicodeDecodeError: 'gbk' codec can't decode bytes in position 459- ...

  3. 移动端点击返回时强制页面刷新解决办法(pageshow)

    在做移动端项目的时候经常遇到这样一个功能比如: 返回后页面不刷新,一些失效的信息依然显示在页面上.这个问题在iphone手机上会出现,在Android手机上返回时会自动刷新(由于手机机器种类不多,无法 ...

  4. UnicodeEncodeError: 'gbk' codec can't encode character '\xa0' in position 9865: illegal multibyte sequence 解决办法

    解决办法 ; a=r.text.replace('\xa0',' ') 详情参见https://stackoverflow.com/questions/10993612/python-removing ...

  5. zencart后台管理中选项名称和选项内容和属性控制页面出错解决办法 WARNING: An Error occurred, please refresh the page and try again

    后台管理中选项名称和选项内容和属性控制出现以下错误的解决办法WARNING: An Error occurred, please refresh the page and try again zen ...

  6. asp 文章内容里的图片宽度过大 撑爆页面布局 解决办法

    有时候帮朋友做做企业网站,还是asp+access来的快,也经济(不用开数据库空间),fck做的后台内容编辑功能,但是他们传图片的时候不靠谱,图片不管有多宽都直接up上来,把前台页面撑的是面目全非! ...

  7. vue项目打包之后页面空白解决办法

    之前项目遇到个情况,npm run build打包之后上传到服务器后,index.html打开一片空白,资源都加载了,但是就是不显示. 然后百度找了原因,修改了两处地方 一.修改 assetsPubl ...

  8. 前端跳转处理--房天下的访问页面部分ip自动跳转到登录页面的解决办法(xjl456852原创)

    朋友说自己在访问房天下的页面时,他们页面进行了跳转,跳转到登录页面,说是前端跳转.让我也看看,我看我的机器没有进行跳转. 后来就发现有的机器在访问页面会自动跳转到登录页面.有的不会进行跳转. 比如访问 ...

  9. ios下使用overflow scroll情况下,到达最极端的情况时会拖动整个页面的解决办法

    今天开发ipad webapp时,遇到个问题就是在支持内部滚动(overflow:scroll)的页面中,在滚到到最极端(最上或者最下时),会拖动整个页面,带来不好的用户体验. 方法一,从网上找到的: ...

随机推荐

  1. js浮点解决

    function add(a, b) { var c, d, e; try { c = a.toString().split(".")[1].length; } catch (f) ...

  2. 阿里巴巴下一代云分析型数据库AnalyticDB入选Forrester Wave™ 云数仓评估报告 解读

    前言近期, 全球权威IT咨询机构Forrester发布"The Forrester WaveTM: CloudData Warehouse Q4 2018"研究报告,阿里巴巴分析型 ...

  3. User control's property loses value after a postback

    User control's property loses value after a postback All variables (and controls) are disposed at th ...

  4. MySQL 小数处理函数 round 和 floor

    一. 在mysql中,round函数用于数据的四舍五入,它有两种形式: 1.round(x,d)  ,x指要处理的数,d是指保留几位小数 这里有个值得注意的地方是,d可以是负数,这时是指定小数点左边的 ...

  5. jmeter3.0启动时报错误 “unable to access jarfile apachejmeter.jar“

    jdk环境也配置好了.但启动时报错.才发现jmeter3.0的bin目录下没有这个.jar文件.复制了一份放到这个目录下就不报这个错了.

  6. java 重新学习 (六)

    一.java7以后,使用带泛型的接口,类定义变量,那么调用构造器创建对象时构造器的后面不必带上泛型.List<String> list = new ArrayList()<>; ...

  7. babel基础配置

    babel是干什么的 es6语法已经出来很多年,但各家游览器对es6的支持各不相同.为了解决这个问题,babel应运而生. babel支持把es6语法编译成es5,完全兼容各家游览器,避免兼容性问题出 ...

  8. spring 注入bean的两种方式

    我们都知道,使用spring框架时,不用再使用new来实例化对象了,直接可以通过spring容器来注入即可. 而注入bean有两种方式: 一种是通过XML来配置的,分别有属性注入.构造函数注入和工厂方 ...

  9. 我爱Linux

    这道题卡了好久,题是一张图片,打开看到看提示以为是用哪个Linux命令处理,直到后来知道后面是python序列化文件的数据,将FF D9后保存出来,将序列化文件读出来写脚本把它画出来 import p ...

  10. ASP.NET MVC 学习笔记之面向切面编程与过滤器

    AOP(面向切面)是一种架构思想,用于把公共的逻辑放到一个单独的地方,这样就不用每个地方都写重复的代码了.比如程序中发生异常,不用每个地方都try…catch 只要在Golbal的Applicatio ...