使用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样式值，其值应该是：


代码如下:

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)

相关推荐

  • css 之 background-position-x

    <div style="width:300px;height:300px;background-image:url(http://www.dnew.cn/template/4color/images/green.png);background-position-x:100"></div> 只能 background-position:100 0 这样来写

  • ie6,ie7,ie8完美支持position:fixed的终极解决方案

    ie6对position:fixed不支持,网上有很多解决方法,有的在ie6,ie7上调试成功后,在ie8上又不好使,div层还是跟随滚动条浮 动:以下总结方法,在ie6,ie7,ie8上都调试成功,且页面滚动条滚动时,效果还挺好,div层并不会闪烁. 复制代码 代码如下: <div id="goTop_div" class="fixed ie">  </div> css: 复制代码 代码如下: .fixed{         positio

  • 详细分析css float 属性以及position:absolute 的区别

    详细分析css float 属性以及position:absolute 的区别

    1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块级元素,会单独占据一行. 先看看最基本的块级元素如何排列的.html代码,以下样式都是基于此. 复制代码 代码如下: <div class="boxBg">        <div class="box1">        框框1       

  • CSS中position属性之fixed实现div居中

    CSS中position属性之fixed实现div居中

    position 属性规定元素的定位类型.这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 上下左右 居中 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px; } 如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即

  • css position: absolute、relative详解

    CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠.此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border ). 要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为 ab

  • 推荐深入理解css中的position定位和z-index属性

    作者:Cutsin 原文地址:http://www.moonless.net/blog/2007/09/csspositionz-index.html 注:本文仅供交流使用,如有不当之处欢迎批评指正,但请注明详由,谢谢! 由于平时不太用到,所以过去写css的时候对于position属性的absolute.relative值理解比较模糊,对于z-index的层叠更是摸不着头脑,除了理解的因素外,各个浏览器的不同解析结果也是一个大问题.今天仔细阅读了一下css文档,总算是对盒模型的浮动.定位有了比较

  • js完美解决IE6不支持position:fixed的bug

    先来看段代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>IE6 position:fixed bug</title> <style> *{padding:0;margin:0} p{height:2000px} #

  • iphone safari不支持position fixed的解决方法

    需求是这样的,许多pc web页面的导航都是固定的,比如google的首页,现在要将这种固定的导航转移到mobile web下,很自然地就会想到position:fixed; bottom: 0,android下运行正常,但在iphone safari下就会出现问题,当滚动条滚动时,导航条就会出现屏幕的上方,黑乎乎的一块,很不协调.许多人推荐iscroll.jquery mobile等框架,但有时效果不如意或是得阅读框架源码进行二次开发,会花费好长一段时间的.经过一段时间的研究,找到了一种解决办

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

    使用CSS样式"position:fixed"可以使div块固定在一个固定位置,即使有滚动条也不会改变其位置.position:fixed给很多开发者带来了惊艳的效果,然而当出现水平滚动条时,效果就不那么容易接受了.有时候我们希望当出现水平滚动条时,div块可以随滚动条左右移动,实现垂直固定定位(fixed),水平相对定位(absolute).本文提供一个解决方法,附jquery扩展源码. 本文的实现方式是使用js来控制div块随滚动条水平滚动,原理就是当window对象发生scrol

  • js获取页面引用的css样式表中的属性值方法(推荐)

    如下所示: function getStyle(node, property){ if (node.style[property]) { return node.style[property]; } else if (node.currentStyle) { return node.currentStyle[property]; } else if (document.defaultView && document.defaultView.getComputedStyle) { var s

  • vue.js引入外部CSS样式和外部JS文件的方法

    学习Vue.js动画时,需要引入一个animate.css,如何全局引入外部文件呢? 一.引入外部CSS样式文件 1. 在app.vue中<style>下直接引入对应的路径 使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到<style></style>里面,而是发起新的请求获得样式资源,并且没有加scoped. <style scoped> @import "../static/font/

  • 详解CSS不受控制的position fixed

    详解CSS不受控制的position fixed

    失效的 position:fixed 在许多情况下,position:fixed将会失效.MDN用一句话概括了这种情况: 当元素祖先的 transform 属性非 none 时,定位容器由视口改为该祖先. What!还有这种操作?可能有部分同学还没 get 到上面这句话的意思,通俗的讲就是指定了position:fixed的元素,如果其祖先元素存在非 none 的 transform 值 ,那么该元素将相对于设定了transform的祖先元素进行定位. 那么,为什么会发生这种情况呢?说好的相对视

  • 使用html+css+js实现导航栏滚动渐变效果

    目录 实现: 1.定义导航栏的文字标签: 2.导航栏整体的样式: 3.北极光这个logo的样式: 4.给北极光logo定位一个图片在文字左边: 5.右边导航标签的一些样式,样式等都不做详细说明了,毕竟每个人的都不一样~: 6.当页面有滚动后导航栏的样式,padding上下变小,字体颜色变,有了蓝背景色: 7.简单js,实现部分: 第一种: 第二种:直接这样: 完整代码: 先看效果: 实现: 1.定义导航栏的文字标签: <div class="tou"> <sapn c

  • javascript ie6兼容position:fixed实现思路

    positon:fixed 让HTML元素脱离文档流固定在浏览器的某个位置 网页中经常会有浮动的导航条会用到这种定位模式,但是ie6下并不兼容这种定位 浮动导航条的样式,重要的是position:fixed;bottom:60px;(浮动导航底部距离窗口底部60px) 复制代码 代码如下: .floating_9677{position:fixed; z-index:961; bottom:60px;} ie6下positon:fixed不起作用,只能靠js来实现了,首先在ie6下需要将posi

随机推荐