麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 編程 > JavaScript > 正文

使用CSS樣式position:fixed水平滾動的方法

2019-11-20 21:04:41
字體:
來源:轉載
供稿:網友
使用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'});
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 99精品在线视频观看 | 一区二区三区日韩在线观看 | lutube成人福利在线观看污 | 久久露脸国语精品国产91 | 日本视频免费观看 | 亚洲精品av在线 | 成人黄视频在线观看 | 日韩精品免费一区二区三区 | 国产午夜精品一区二区三区在线观看 | 黄色大片高清 | 91精品国产91 | 日日夜av | 精品国产乱码久久久久久丨区2区 | 成年免费在线视频 | 国产91久久久久久 | 国产二区三区在线播放 | 久久久久亚洲视频 | 欧美日韩成人一区二区 | 国产欧美一区二区三区免费看 | 免费看成人av | 久久久久久久久久久久久久久伊免 | 精品亚洲午夜久久久久91 | 亚洲成人伊人 | 欧美一级网 | 亚洲综合色视频在线观看 | 国产精品一区二区三区在线播放 | 亚洲福利在线视频 | 久久色播 | 久久久久久久一区 | 激情小说区 | 亚洲视频在线网 | 密室逃脱第一季免费观看完整在线 | 女18一级大黄毛片免费女人 | 色综合精品 | 亚洲午夜国产 | 日本综合久久 | 一级毛片免费高清 | 国产成人强伦免费视频网站 | 久久无 | 久夜tv | 日本一级黄色大片 |