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& ...
随机推荐
- 春天JDBC事务管理
JDBC事务管理 春天提供编程式的事务管理(编程式事务管理)与声明式的事务管理(声明式事务management),为不同的事务实现提供了一致的编程模型,这节以JDBC事务为例,介绍Spring的事务管 ...
- 发现DELL笔记本一个很弱智的问题
以前用联想的笔记本,最近联想笔记本坏了,用的是公司的DELL笔记本,发现DELL笔记本一个很弱智的问题. 关于禁用触摸板的问题. 起因: 由于要经常写程序,我配置的有有线鼠标,但是打字时经常碰到触摸板 ...
- 一篇文章带你了解Cloud Native
背景 Cloud Native表面看起来比较容易理解,但是细思好像又有些模糊不清:Cloud Native和Cloud关系是啥?它用来解决什么问题?它是一个新技术还是一个新的方法?什么样的APP符合“ ...
- Amazing iOS Tips
先开个题,慢慢加内容: 准备参考的资料 https://github.com/Aufree/trip-to-iOS https://github.com/vsouza/awesome-io ...
- c#之多线程之为所欲为
一 什么是多线程 1. 什么是进程?一个 exe 运行一次就会产生一个进程,一个 exe 的多个进程之 间数据互相隔离. 2. 一个进程里至少有一个线程:主线程.我们平时写的控制台程序默认就是单线程的 ...
- Flipping Parentheses~Gym 100803G
Description A string consisting only of parentheses '(' and ')' is called balanced if it is one of t ...
- Java并发-取消与关闭
如果外部代码可以再某个操作正常完成之前就将其置入"完成"状态,那么这个操作就是可以取消的.取消的原因有:用户请求取消.有时间限制的操作.应用程序事件.错误和关闭等 中断 如果使用某 ...
- Vue作者尤雨溪:以匠人的态度不断打磨完善Vue (图灵访谈)
访谈对象: 尤雨溪,Vue.js 创作者,Vue Technology创始人,致力于Vue的研究开发. 访谈内容: 你为何选择从事前端方面的工作? 其实,我本科读的是艺术史,研究生阶段学习Design ...
- css那些事(一)
一.内边框padding和外边框margin属性缩写 内外边框有四个属性:padding-top,padding-right,padding-bottom,padding-left;margin-to ...
- seek()对中文偏移测试
当前目录下创建"中文测试.txt"文件,写入: 我是大好人aaa我是大坏人bbb f = open('中文测试.txt', 'r+', encoding='utf-8') # f. ...