使用CSS样式position:fixed水平滚动的方法


Posted in Javascript onFebruary 19, 2014

使用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'});
Javascript 相关文章推荐
枚举JavaScript对象的函数
Dec 22 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
jQuery拖拽div实现思路
Feb 19 #Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 #Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 #Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 #Javascript
javascript动态向网页中添加表格实现代码
Feb 19 #Javascript
javascript实现动态侧边栏代码
Feb 19 #Javascript
返回上一页并自动刷新的JavaScript代码
Feb 19 #Javascript
You might like
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
php汉字转拼音的示例
2014/02/27 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
初步认识Python中的列表与位运算符
2015/10/12 Python
python之PyMongo使用总结
2017/05/26 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
python3实现名片管理系统
2020/11/29 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
学校门卫工作职责
2013/12/07 职场文书
销售冠军获奖感言
2014/02/03 职场文书
总经理助理工作职责
2014/02/06 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
廉洁校园实施方案
2014/05/25 职场文书
贷款收入证明范本
2015/06/12 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python