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& ...
随机推荐
- mybatis源码之PreparedStatementHandler
/** * @author Clinton Begin */ public class PreparedStatementHandler extends BaseStatementHandler { ...
- SoC嵌入式软件架构设计
内存是SoC(System on Chip,片上系统)集成设计的重要模块,是SoC中成本比重较大的部分.内存管理的软硬件设计是SoC软件架构设计的重要一环,架构设计师必须要在成本和效率中取得平衡,做到 ...
- SharePoint 2010 -- .Net托管客户端模型简单示例
.Net托管客户端模型,是SharePoint2010推出的三种客户端模型".NET托管"."ECMAScript"."Sliverlight&quo ...
- 图像处理程序框架—MFC相关知识点
CDC:Windows使用与设备无关的图形设备环境(DC :Device Context) 进行显示 . MFC基础类库定义了设备环境对象类----CDC类. CDC与CGdiObject的关系 说道 ...
- leetcode之旅(7)-Move Zeroes
Move Zeroes 题目描述: Given an array nums, write a function to move all 0's to the end of it while maint ...
- PHP单元测试使用
单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证.对于单元测试中单元的含义,一般来说,要根据实际情况去判定其具体含义,如C语言中单元指一个函数,Java里单元指一个类, ...
- ionic1 sqlite的添加使用
开始使用这个存储方式的原因是 之前用的Local Storage 存储在ios设备上 当内存达到一定程度时 ios会自动清除app的一部分存储 所以之前存的东西可能会被清除 达不到想要的功能效果 ...
- Ubuntu16.04部署phantomjs的一个问题
首先phantomjs是作为pyspider的一个外部依赖组件部署的. apt安装完出现问题: QXcbConnection: Could not connect to display Phantom ...
- 基于Python的数据分析:数据库索引效率探究
索引在数据库中是一个很特殊的存在,它的目的就是为了提高数据查询得效率.同样,它也有弊端,更新一个带索引的表的时间比更新一个没有带索引的时间更长.有得有失.我希望做一些研究测试,搞清楚索引对于我们使用数 ...
- jq监听input-val变化事件
$('body').on('input propertychange', '.info-number-val-box', function(event) { xxxxx });