页面上用fixed定位一个元素,随滚动条滚动位置不变,最开始我只用了css给元素身上写上fixed属性,发现滚动时元素会发生抖动,随后我就在网上找到解决办法,封装了个方法,如下:

Css部分


此部分是元素的样式代码,fixed是重点。

Html部分


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

Javascript部分


此部分思路主要是利用初始元素高度-滚动条至窗口部的距离,实现效果。

.wrap是需要和fixed元素齐平的内容类名。

情况一:滚动条在上方,界面在一屏内,滚动距离必定小于top,sTop大于90时,元素的top就等于sTop。

情况二:滚动条在下方,界面大于一屏,滚动距离必定大于等于top,sTop小于等于90,元素的top就固定为90。

fixed元素随滚动条无抖动滚动的更多相关文章

  1. ios中fixed元素在滚动布局中的延时渲染问题

    在之前做的一个demo中,有个视图是内滚动的,里边有个bar用了fixed,不是fixed在最外层视图的顶部和底部,在微信/safari/chrome/其他浏览器app上都没出现问题. 然后今天,我把 ...

  2. ios下,微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样

    问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个v ...

  3. 【JQuery插件】元素根据滚动条位置自定义吸顶效果

    ;(function($){ $.fn.extend({ /* 元素根据滚动条位置自定义吸顶插件 @defaultTop 初始化top位置 @startTop 开始滚动和回复原样的位置 @demo v ...

  4. ios position:fixed 上滑下拉抖动

    ios position:fixed 上滑下拉抖动 最近呢遇到一个ios的兼容问题,界面是需要一个头底部的固定的效果,用的position:fixed定位布局,写完测试发现安卓手机正常的,按时ios上 ...

  5. 关于transition动画下,如果有fixed元素,渲染的奇葩问题

    之前我们机票页面有生成一个低价日历,然后我们有一个需求就是滚动到那个月份,对应显示这个月,然后这个区域是fixed定位的,然后奇怪的事情发生了,就是低价日历的动画执行完后,修改页面的html却没有正常 ...

  6. javascript-图片横向无缝隙滚动(可在服务器运行)

    前两次弄'图片横向滚动'javascript,在本地上运行得很美,可是一上到我们学校后台的服务器,就有很多问题,这个算是行的了. css代码: <style type="text/cs ...

  7. 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...

  8. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  9. 防止fixed元素遮挡其他元素的方法

    有多个页面,有的有固定的头部(设置了postion:fixed的元素),有的没有固定的头部,这时就有个问题,有固定头部的页面,头部会遮挡下面的内容,那怎么解决呢? <!DOCTYPE html& ...

随机推荐

  1. Unity修改Particles Render Material(Unity3D开发之二十三)

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/48372999 ...

  2. NOSQL schema创建原则

    (1)数据规模 Bigtable类数据库系统(HBase,Cassandra等)是为了解决海量数据规模的存储需要设计的.这里说的海量数据规模指的是单个表存储的数据量是在TB或者PB规模,单个表是由千亿 ...

  3. Https背景与证书在spring boot项目中的使用

    https背景(本人学习参考中觉得不错的几篇文章) https如何解决安全问题 HTTPS 理论基础及其在 Android 中的最佳实践 什么是https 关于https的个人总结 总所周知http是 ...

  4. index() checkbox单选问题

    index() 只对兄弟节点有用 如果这种结构要选择checkbox 时用prop附加属性 removeAttr清楚属性 $('.checkbox').prop('checked',true) $(' ...

  5. JavaScript 对象分类

    参考自W3School:JavaScript对象主要有三类. 一:JavaScript核心对象是ECMAScript标准定义好的一些对象与函数,在JavaScript语言中可以直接使用.主要常用有如下 ...

  6. J2EE架构师之路

    不经意的回首,工作进入第五个年头了,发现走过了从Java程序员到J2EE架构师的历程. 发现电脑上安装了各种各样的J2EE工具:JBuilder, WSAD, Eclipse, Rose, Toget ...

  7. 【转载】解决nginx负载均衡的session共享问题

    https://blog.csdn.net/u012081441/article/details/71787164 之前有写过ubuntu环境下搭建nginx环境,今天来谈一下nginx sessio ...

  8. 关于redis分布式锁的实现方式(转载)

    这个是在网上找到的一个大神写的(http://wudashan.cn/2017/10/23/Redis-Distributed-Lock-Implement/),对于分布式redis部署的,可以参考r ...

  9. python---生成器、迭代器

    # -*- coding:utf-8 -*- # LC # 列表生成式 def func(x): print(x) return 2*x print([ func(i) for i in range( ...

  10. Spring MVC “404 Not Found”错误的解决

    一般这个问题发生的原因不会出在Web.xml配置文件的Servlet URL映射部分,因为这个URL映射做JavaWeb的人经常配置不会发生错误,而且此处的这个映射自由度很大,可以有目录字符串,也可以 ...