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& ...
随机推荐
- Unity修改Particles Render Material(Unity3D开发之二十三)
猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/48372999 ...
- NOSQL schema创建原则
(1)数据规模 Bigtable类数据库系统(HBase,Cassandra等)是为了解决海量数据规模的存储需要设计的.这里说的海量数据规模指的是单个表存储的数据量是在TB或者PB规模,单个表是由千亿 ...
- Https背景与证书在spring boot项目中的使用
https背景(本人学习参考中觉得不错的几篇文章) https如何解决安全问题 HTTPS 理论基础及其在 Android 中的最佳实践 什么是https 关于https的个人总结 总所周知http是 ...
- index() checkbox单选问题
index() 只对兄弟节点有用 如果这种结构要选择checkbox 时用prop附加属性 removeAttr清楚属性 $('.checkbox').prop('checked',true) $(' ...
- JavaScript 对象分类
参考自W3School:JavaScript对象主要有三类. 一:JavaScript核心对象是ECMAScript标准定义好的一些对象与函数,在JavaScript语言中可以直接使用.主要常用有如下 ...
- J2EE架构师之路
不经意的回首,工作进入第五个年头了,发现走过了从Java程序员到J2EE架构师的历程. 发现电脑上安装了各种各样的J2EE工具:JBuilder, WSAD, Eclipse, Rose, Toget ...
- 【转载】解决nginx负载均衡的session共享问题
https://blog.csdn.net/u012081441/article/details/71787164 之前有写过ubuntu环境下搭建nginx环境,今天来谈一下nginx sessio ...
- 关于redis分布式锁的实现方式(转载)
这个是在网上找到的一个大神写的(http://wudashan.cn/2017/10/23/Redis-Distributed-Lock-Implement/),对于分布式redis部署的,可以参考r ...
- python---生成器、迭代器
# -*- coding:utf-8 -*- # LC # 列表生成式 def func(x): print(x) return 2*x print([ func(i) for i in range( ...
- Spring MVC “404 Not Found”错误的解决
一般这个问题发生的原因不会出在Web.xml配置文件的Servlet URL映射部分,因为这个URL映射做JavaWeb的人经常配置不会发生错误,而且此处的这个映射自由度很大,可以有目录字符串,也可以 ...