使用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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
JS date对象的减法处理实现代码
Dec 28 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
jquery.validate分组验证代码
Mar 17 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
原生js实现弹窗消息动画
Nov 20 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 Javascript
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-fpm静态和动态执行方式的比较
2016/11/09 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
JavaScript 常用函数
2009/12/30 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
详解jQuery选择器
2016/12/21 Javascript
JS实现复制功能
2017/03/01 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
django中模板的html自动转意方法
2018/05/27 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
python入门之井字棋小游戏
2020/03/05 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
大专生自荐书范文
2014/06/22 职场文书
化学教育专业自荐信
2014/07/04 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
化妆品促销活动总结
2015/05/07 职场文书
检讨书怎么写?
2019/06/21 职场文书
MySQL系列之二 多实例配置
2021/07/02 MySQL