使用CSS樣式position:fixed水平滾動(dòng)的方法
更新時(shí)間:2014年02月19日 16:23:12 作者:
這篇文章主要介紹了使用CSS樣式position:fixed水平滾動(dòng)的方法,需要的朋友可以參考下
使用CSS樣式"position:fixed"可以使div塊固定在一個(gè)固定位置,即使有滾動(dòng)條也不會(huì)改變其位置。position:fixed給很多開(kāi)發(fā)者帶來(lái)了驚艷的效果,然而當(dāng)出現(xiàn)水平滾動(dòng)條時(shí),效果就不那么容易接受了。有時(shí)候我們希望當(dāng)出現(xiàn)水平滾動(dòng)條時(shí),div塊可以隨滾動(dòng)條左右移動(dòng),實(shí)現(xiàn)垂直固定定位(fixed),水平相對(duì)定位(absolute)。本文提供一個(gè)解決方法,附j(luò)query擴(kuò)展源碼。
本文的實(shí)現(xiàn)方式是使用js來(lái)控制div塊隨滾動(dòng)條水平滾動(dòng),原理就是當(dāng)window對(duì)象發(fā)生scroll事件和resize事件使,更新div塊的left或right的值,使其相對(duì)瀏覽器左邊或右邊的位置實(shí)時(shí)改變。div塊需要時(shí)position:fixed樣式修飾。
當(dāng)div塊在水平方向上是相對(duì)瀏覽器右邊固定的,那么當(dāng)window對(duì)象發(fā)生scroll或resize事件時(shí),就更新其right樣式值,其值應(yīng)該是:
var new_right = ($(window).scrollLeft() + $(window).width() - $(document).width() + original_right) + 'px'
當(dāng)div塊在水平方向上是相對(duì)瀏覽器左邊固定的,那么當(dāng)window對(duì)象發(fā)生scroll或resize事件時(shí),就更新其left樣式值,其值應(yīng)該是:
var new_left = (original_left - $(window).scrollLeft()) + 'px'
上面代碼中出現(xiàn)的original_left和original_right是最初div塊的left和right值。完整的jquery擴(kuò)展代碼如下:
(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);
使用實(shí)例:
$('#leftsider').scrollFixed({fixed:'left'});
$('#rightsider').scrollFixed({fixed:'right'});
本文的實(shí)現(xiàn)方式是使用js來(lái)控制div塊隨滾動(dòng)條水平滾動(dòng),原理就是當(dāng)window對(duì)象發(fā)生scroll事件和resize事件使,更新div塊的left或right的值,使其相對(duì)瀏覽器左邊或右邊的位置實(shí)時(shí)改變。div塊需要時(shí)position:fixed樣式修飾。
當(dāng)div塊在水平方向上是相對(duì)瀏覽器右邊固定的,那么當(dāng)window對(duì)象發(fā)生scroll或resize事件時(shí),就更新其right樣式值,其值應(yīng)該是:
復(fù)制代碼 代碼如下:
var new_right = ($(window).scrollLeft() + $(window).width() - $(document).width() + original_right) + 'px'
當(dāng)div塊在水平方向上是相對(duì)瀏覽器左邊固定的,那么當(dāng)window對(duì)象發(fā)生scroll或resize事件時(shí),就更新其left樣式值,其值應(yīng)該是:
復(fù)制代碼 代碼如下:
var new_left = (original_left - $(window).scrollLeft()) + 'px'
上面代碼中出現(xiàn)的original_left和original_right是最初div塊的left和right值。完整的jquery擴(kuò)展代碼如下:
復(fù)制代碼 代碼如下:
(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);
使用實(shí)例:
復(fù)制代碼 代碼如下:
$('#leftsider').scrollFixed({fixed:'left'});
$('#rightsider').scrollFixed({fixed:'right'});
相關(guān)文章
jQuery插件dataTables添加序號(hào)列的方法
這篇文章主要介紹了jQuery插件dataTables添加序號(hào)列的方法的相關(guān)資料,需要的朋友可以參考下2016-07-07jQuery實(shí)現(xiàn)的分頁(yè)插件完整示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的分頁(yè)插件,結(jié)合完整實(shí)例形式分析了jQuery分頁(yè)插件的定義與使用相關(guān)操作技巧,需要的朋友可以參考下2020-05-05跟著JQuery API學(xué)Jquery 之二 屬性
在選擇器的API學(xué)習(xí)中,走馬觀花的把選擇器過(guò)了一遍,但是選擇歸選擇,選擇出來(lái)了沒(méi)干什么事,也沒(méi)有什么用嘛2010-04-04jquery ui bootstrap 實(shí)現(xiàn)自定義風(fēng)格
本文主要是給大家分享了jQuery UI bootstrap的自定義風(fēng)格,以及自定義的方法,非常的實(shí)用,有需要的小伙伴千萬(wàn)不要錯(cuò)過(guò)2014-11-11jQuery實(shí)現(xiàn)鼠標(biāo)選中文字后彈出提示窗口效果【附demo源碼】
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)選中文字后彈出提示窗口效果,涉及jQuery事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,非常簡(jiǎn)便實(shí)用,需要的朋友可以參考下2016-09-09jquery圖片預(yù)覽插件實(shí)現(xiàn)方法詳解
這篇文章主要為大家詳細(xì)介紹了jquery圖片預(yù)覽插件的實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07