fixed元素随滚动条无抖动滚动
页面上用fixed定位一个元素,随滚动条滚动位置不变,最开始我只用了css给元素身上写上fixed属性,发现滚动时元素会发生抖动,随后我就在网上找到解决办法,封装了个方法,如下:
Css部分
此部分是元素的样式代码,fixed是重点。

Html部分
此部分根据自己需要给一个id号

Javascript部分
此部分思路主要是利用初始元素高度-滚动条至窗口部的距离,实现效果。
.wrap是需要和fixed元素齐平的内容类名。
情况一:滚动条在上方,界面在一屏内,滚动距离必定小于top,sTop大于90时,元素的top就等于sTop。
情况二:滚动条在下方,界面大于一屏,滚动距离必定大于等于top,sTop小于等于90,元素的top就固定为90。

fixed元素随滚动条无抖动滚动的更多相关文章
- ios中fixed元素在滚动布局中的延时渲染问题
在之前做的一个demo中,有个视图是内滚动的,里边有个bar用了fixed,不是fixed在最外层视图的顶部和底部,在微信/safari/chrome/其他浏览器app上都没出现问题. 然后今天,我把 ...
- ios下,微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样
问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个v ...
- 【JQuery插件】元素根据滚动条位置自定义吸顶效果
;(function($){ $.fn.extend({ /* 元素根据滚动条位置自定义吸顶插件 @defaultTop 初始化top位置 @startTop 开始滚动和回复原样的位置 @demo v ...
- ios position:fixed 上滑下拉抖动
ios position:fixed 上滑下拉抖动 最近呢遇到一个ios的兼容问题,界面是需要一个头底部的固定的效果,用的position:fixed定位布局,写完测试发现安卓手机正常的,按时ios上 ...
- 关于transition动画下,如果有fixed元素,渲染的奇葩问题
之前我们机票页面有生成一个低价日历,然后我们有一个需求就是滚动到那个月份,对应显示这个月,然后这个区域是fixed定位的,然后奇怪的事情发生了,就是低价日历的动画执行完后,修改页面的html却没有正常 ...
- javascript-图片横向无缝隙滚动(可在服务器运行)
前两次弄'图片横向滚动'javascript,在本地上运行得很美,可是一上到我们学校后台的服务器,就有很多问题,这个算是行的了. css代码: <style type="text/cs ...
- 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系
问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...
- JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...
- 防止fixed元素遮挡其他元素的方法
有多个页面,有的有固定的头部(设置了postion:fixed的元素),有的没有固定的头部,这时就有个问题,有固定头部的页面,头部会遮挡下面的内容,那怎么解决呢? <!DOCTYPE html& ...
随机推荐
- 【43】Activity的几种LaunchMode及使用场景
standard 模式 这是默认模式,每次激活Activity时都会创建Activity实例,并放入任务栈中.使用场景:大多数Activity. singleTop 模式 如果在任务的栈顶正好存在该A ...
- web报表工具FineReport的公式编辑框的语法简介
FINEREPORT用到公式的地方非常多,单元格(以=开头的便被解析为公式),条件显示,数据字典,报表填报属性值定义,图表标题,轴定义,页眉页脚,甚至单元格的其他属性中的鼠标悬浮提示内容都可以写公式, ...
- How tomcat works 读书笔记十二 StandardContext 下
对重载的支持 tomcat里容器对重载功能的支持是依靠Load的(在目前就是WebLoader).当在绑定载入器的容器时 public void setContainer(Container cont ...
- android的服务分类-andrioid学习之旅(94)
摘自韩国棒子的书,android框架摘要 android服务类型分类,如下图: 对于本地服务,有两种类型,一中是绑定进行数据交流,一种是不绑定的,生命周期如下图:
- rails小重构:将图片加入产品Model之二
在前面我们重构了product中图片的实现,但是还是有一些小问题.比如用户如果上传一个非图片格式的文件时的验证情况. 我们之前是将图片格式验证代码放在Picture类中: validates_form ...
- SNMP相关的RFC建议和链接
1. SNMP Books or Articleshttp://www.faqs.org/faqs/snmp-faq/part1/http://www.faqs.org/faqs/snmp-faq/p ...
- 【转载】Session的生命周期
http://www.cnblogs.com/binger/archive/2013/03/19/2970171.html 以前在学习的时候没怎么注意,今天又回过头来仔细研究研究了一下Session的 ...
- Netty入门
一.NIO Netty框架底层是对NIO的高度封装,所以想要更好的学习Netty之前,应先了解下什么是NIO - NIO是non-blocking的简称,在jdk1.4 里提供的新api,他的他的特性 ...
- FFPLAY的原理(五)
创建线程 Spawning Threads Overview Last time we added audio support by taking advantage of SDL's audio f ...
- 无效类字符串:ProgID: Excel.Application
网上发现的方案是改注册表,其实用不着那么麻烦,找2种excel文件:xlsx和xls,把默认打开方式都换成你机器上有的程序就行,比如WPS Office的WPS 表格