使position:fixed样式水平滚动的方法
来源:互联网 发布:淘宝大悦运动怎么样 编辑:程序博客网 时间:2024/04/20 23:11
版权所有,转载请注明出处:http://guangboo.org/2013/09/19/horizontal-scrollable-for-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样式值,其值应该是:
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扩展代码如下:
(function($){$.ScrollFixed = function(el, options){var base = this;base.$el = $(el);base.el = el;var target = base.$el;var original_left = parseInt(target.css('left'));var original_right = parseInt(target.css('right'));var _fix_position = function(){if(base.options.fixed == 'right'){target.css('right', ($(window).scrollLeft() + $(window).width() - $(document).width() + original_right) + 'px');} else if(base.options.fixed == 'left'){target.css('left', (original_left - $(window).scrollLeft()) + 'px');}};var windowResize = function(){_fix_position();};var windowScroll = function(){_fix_position();};base.init = function(){base.options = $.extend({}, $.ScrollFixed.defaultOptions, options);$(window).resize(windowResize);$(window).scroll(windowScroll);_fix_position();console.log(base.options.fixed);};base.init();};$.ScrollFixed.defaultOptions = {fixed:'left'};$.fn.scrollFixed = function(options){return this.each(function(){(new $.ScrollFixed(this, options));});};})(jQuery);
使用实例:
$('#leftsider').scrollFixed({fixed:'left'});$('#rightsider').scrollFixed({fixed:'right'});
0 0
- 使position:fixed样式水平滚动的方法
- 使用CSS样式position:fixed水平滚动的方法
- position: fixed 水平滚动定位
- position:fixed;滚动条
- 使position:fixed的DIV居中
- position:fixed的解决办法!
- ie6的position:fixed
- 【CSS】IE6中的position:fixed问题与随滚动条滚动的效果
- 让 IE < 7 支持 position:fixed 的通用方法
- 解决IE6不支持position:fixed的方法,非常简单
- 解决IE6下position:fixed失效的方法
- ios中position:fixed异常的变通方法
- 几种解决position:fixed 抖动的方法
- position:fixed失效的问题
- 不受控制的 position-fixed
- CSS模拟position:fixed,一边滚动,一边不滚动
- 【JavaScript】利用滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
- 【JavaScript】利用滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
- 遍历Java对象,并执行其中的方法(通过反射执行方法)
- 【OpenCV学习笔记】【函数学习】二十(访问图像像素)
- 本地域名转向Hosts文件位置
- JAVA代码热部署
- 黑马程序员-----hashCode的作用
- 使position:fixed样式水平滚动的方法
- [转] java 执行sql脚本的3种方式 (ant,ibatis,ScriptRunner)
- Oracle建表常用数据类型详解
- HFS私人HTTP文件共享服务软件
- openstack 命令行管理十 - 密钥管理 (备忘)
- 编程之美-中国象棋将帅问题
- VirtualBox 虚拟机
- 内核——eCos内核概览
- Java控制流(如:标准输入输出)的注意事项