使用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 相关文章推荐
Maps Javascript
Jan 22 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 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 地区分类排序算法
2013/07/01 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
jquery validate demo 基础
2015/10/29 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
windows下更新npm和node的方法
2017/11/30 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
Python中列表(list)操作方法汇总
2014/08/18 Python
Python实现查找系统盘中需要找的字符
2015/07/14 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
Python如何使用字符打印照片
2020/01/03 Python
html5使用canvas画一条线
2014/12/15 HTML / CSS
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
个人简历中的自我评价范例
2013/10/29 职场文书
运动会开幕式邀请函
2014/01/22 职场文书
学生感冒英文请假条
2014/02/04 职场文书
产品生产计划书
2014/05/07 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
同意报考证明
2015/06/17 职场文书
致短跑运动员加油稿
2015/07/21 职场文书