今天做项目遇到一个问题。鼠标滚动到指定长度后，理想状况是菜单吸附到顶部。但是实际上在一些页面上会造成抖动。定位之后发现。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. 【Flutter学习】一些重要的概念之of(context)方法

    在flutter中我们经常会使用到这样的代码 //打开一个新的页面 Navigator.of(context).push //打开Scaffold的Drawer Scaffold.of(context ...

  2. Centos6.6部署Redis集群

    Centos6.6部署Redis集群 1环境准备 1环境安装redis 1安装ruby 2配置redis主从环境 3部署redis sentinel服务器 5集群使用 13当前集群环境说明 13测试功 ...

  3. （转）使用OpenGL显示图像（六）响应触摸事件

    响应触摸事件 编写:jdneo - 原文:http://developer.android.com/training/graphics/opengl/touch.html 让对象根据预设的程序运动(如 ...

  4. RHEL6.1 安装 Oracle10gr2 (图文、解析)

    目录 目录 软件环境 前言 初始化RHEL61 硬件检测 预安装软件包 安装oratoolkit 创建Oracle用户 修改配置文件 系统版本伪装 解压并运行Oracle10gr2安装包 安装rlwr ...

  5. 3.Jmeter 快速入门教程(三-1) --添加响应断言（即loadrunner中所指的检查点）

    上一节课,我们创建了一个测试场景,并进行了少量vuser的负载测试. 有时候我们执行了测试,但是发现并不是所有事务都执行成功了. 那是因为我们只是发起了测试,但并没有对每次请求测试的返回作校验. 所以 ...

  6. spring boot MVC

    1 spring boot的用途 第一,spring boot可以用来开发mvc web应用. 第二,spring boot可以用来开发rest api. 第三,spring boot也可以用来开发w ...

  7. Scala 槽点 - require

    require def this(name: String, age: Int) = { this() require(name != null && !name.isEmpty, & ...

  8. 19-python基础-进制之间的转换

    二进制-八进制-十进制-十六进制相互转换 1.十进制转为其他进制 # (1)十进制转二进制 a = 8 bin(a) --->>'0b1000' # (2)十进制转八进制 oct(a) - ...

  9. [BJWC2018]上学路线

    Description 小B 所在的城市的道路构成了一个方形网格,它的西南角为(0,0),东北角为(N,M). 小B 家住在西南角,学校在东北角.现在有T 个路口进行施工,小B 不能通过这些路口.小B ...

  10. Neo4j-Cypher查询语言-函数

    断言函数(Predicate functions)  函数名称 函数说明 ALL(identifier in collection WHERE predicate) 判断一个断言(predicate) ...