使用CSS样式position:fixed水平滚动的方法
2015-07-29 13:19
681 查看
这篇文章主要介绍了使用CSS样式position:fixed水平滚动的方法,需要的朋友可以参考下
使用CSS样式"position:fixed"可以使div块固定在一个固定位置,即使有滚动条也不会改变其位置。position:fixed给很多开发者带来了惊艳的效果,然而当出现水平滚动条时,效果就不那么容易接受了。有时候我们希望当出现水平滚动条时,div块可以随滚动条左右移动,实现垂直固定定位(fixed),水平相对定位(absolute)。本文提供一个解决方法,附jquery扩展源码。
本文的实现方式是使用js来控制div块随滚动条水平滚动,原理就是当window对象发生scroll事件和resize事件使,更新div块的left或right的值,使其相对浏览器左边或右边的位置实时改变。div块需要时position:fixed样式修饰。
当div块在水平方向上是相对浏览器右边固定的,那么当window对象发生scroll或resize事件时,就更新其right样式值,其值应该是:
当div块在水平方向上是相对浏览器左边固定的,那么当window对象发生scroll或resize事件时,就更新其left样式值,其值应该是:
上面代码中出现的original_left和original_right是最初div块的left和right值。完整的jquery扩展代码如下:
使用实例:
使用CSS样式"position:fixed"可以使div块固定在一个固定位置,即使有滚动条也不会改变其位置。position:fixed给很多开发者带来了惊艳的效果,然而当出现水平滚动条时,效果就不那么容易接受了。有时候我们希望当出现水平滚动条时,div块可以随滚动条左右移动,实现垂直固定定位(fixed),水平相对定位(absolute)。本文提供一个解决方法,附jquery扩展源码。
本文的实现方式是使用js来控制div块随滚动条水平滚动,原理就是当window对象发生scroll事件和resize事件使,更新div块的left或right的值,使其相对浏览器左边或右边的位置实时改变。div块需要时position:fixed样式修饰。
当div块在水平方向上是相对浏览器右边固定的,那么当window对象发生scroll或resize事件时,就更新其right样式值,其值应该是:
var new_right = ($(window).scrollLeft() + $(window).width() - $(document).width() + original_right) + 'px'
当div块在水平方向上是相对浏览器左边固定的,那么当window对象发生scroll或resize事件时,就更新其left样式值,其值应该是:
var new_left = (original_left - $(window).scrollLeft()) + 'px'
上面代码中出现的original_left和original_right是最初div块的left和right值。完整的jquery扩展代码如下:
使用实例:
$('#leftsider').scrollFixed({fixed:'left'}); $('#rightsider').scrollFixed({fixed:'right'});
相关文章推荐
- 一款很漂亮的CSS3登录界面
- css中的选择器
- 去除inline-block元素间间距的N种方法
- CSS常用属性
- 【jetty】jetty作为maven插件,解除JS/CSS等静态文件锁定
- CSS布局页面之盒子模型
- 样式表的重置
- CSS中的长度单位
- CSS中让一个div的高度随着另外个一个统计的div的高度变化而变化的代码
- CSS中让一个div的高度随着另外个一个统计的div的高度变化而变化的代码
- Grunt 进行js,css文件合并,压缩
- Js 动态插入css js文件
- QTableView的滚动条设置样式
- php使用gzip压缩传输js和css文件的方法
- 纯CSS绘制三角形(各种角度)
- CSS实现不固定宽度和高度的自动居中
- 纯CSS3浮雕质感的立体文字旋转动画
- Java Web项目中CSS路径的问题
- CSS3 transition的使用
- DOM 操作表格及样式