页面上用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. leetcode之旅(10)-Roman to Integer

    题目描述: Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range fr ...

  2. ZeroMQ 教程 001 : 基本概览

    介绍性的话我这里就不翻译了, 总结起来就是zmq很cool, 你应该尝试一下. 如何安装与使用zmq 在Linux和Mac OS上, 请通过随机附带的包管理软件, 或者home brew安装zmq. ...

  3. ORM框架--GreenDao 3.0基本使用指南

    0. ORM框架--GreenDao 3.0基本使用指南 1. Gradle 的配置 这里可以参照官方的文档进行最新的配置(本示例的版本等你看到可能就不是最新的了),但是值得注意的一点是,GreenD ...

  4. pyqt5 动画在QThread线程中无法运行问题

    自己做了一个tcp工具,在学习动画的时候踩了坑,需求是根据上线变绿色,离线变灰色,如果连接断开了,则变为灰色 问题现象: 可以看到点击"连接","离线"的时候动 ...

  5. java 深入理解内部类以及之间的调用关系

    什么是内部类 内部类是指在一个外部类的内部再定义一个类.内部类作为外部类的一个成员,并且依附于外部类而存在的.内部类可为静态,可用protected和private修饰(而外部类只能使用public和 ...

  6. javascript学习(三)——常用方法(2)

    一.兼容性较高的浏览器页面关闭 //关闭网页,不支持火狐(火狐返回上次浏览页面)   //FireFox非window.open()等弹出页面,需要在地址栏中输入about:config, 然后将do ...

  7. Reportng配置报告地址

    ant build <target name="transform"> <xslt in="./target/surefire-reports/test ...

  8. Spring消息之STOMP

    一.STOMP 简介 直接使用WebSocket(或SockJS)就很类似于使用TCP套接字来编写Web应用.因为没有高层级的线路协议(wire protocol),因此就需要我们定义应用之间所发送消 ...

  9. 推荐 git community book 中文版

    官方地址:http://Git.seyren.com/index.html 或者 http://gitbook.liuhui998.com/ book@github项目地址: https://gith ...

  10. Centos 7安装python3

    纯傻瓜式步骤,保证成功. 下面的操作,按照步骤来就可以了,不要在中途cd 到别的文件目录下,要想查看效果可以用 lsj加上对应的目录,不需要切换进去. 首先不管你当前在哪个目录下,输入以下命令. [r ...