CSSスタイルを使用する「位置：固定」により、Divブロックを固定位置に固定でき、スクロールバーがあってもその位置は変更されません。ポジション：固定は多くの開発者に驚くべき効果をもたらしましたが、水平スクロールバーが表示されると、その効果を受け入れるのはそれほど簡単ではありません。水平スクロールバーが表示されると、Divブロックがスクロールバーで左右に移動し、垂直固定位置（固定）および水平相対位置（絶対）を実現できることを願っています。この記事は、jQuery拡張ソースコードを備えたソリューションを提供します。
この記事の実装方法は、JSを使用して、スクロールバーで水平にスクロールすることです時間。位置：Divブロックが必要なときのスタイルの修正を固定します。
Divブロックがブラウザの右側に対して水平に固定されている場合、ウィンドウオブジェクトでスクロールまたはサイズ変更イベントが発生すると、その正しいスタイルの値が更新され、その値は次のとおりです。
コードコピーは次のとおりです。
var new_right =（$（window）.scrollleft（） + $（window）.width（） - $（document）.width（） + original_right） + 'px'
Divブロックがブラウザの左側に比べて水平方向に固定されている場合、ウィンドウオブジェクトでスクロールまたはサイズ変更イベントが発生すると、その左スタイルの値が更新され、その値は次のとおりです。
コードコピーは次のとおりです。
var new_left =（original_left -$（window）.scrollleft（）） + 'px'
Original_LeftとOriginal_right上記のコードに表示されるのは、元のDivブロックの左右の値です。完全な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（ 'ride'））;
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 = {
修正：「左」
};
$ .fn.scrollfixed = function（options）{
return this.eact（function（）{
（new $ .scrollfixed（this、options））;
}）;
};
}）（jQuery）;
使用の例：
コードコピーは次のとおりです。
$（ '＃leftsider'）。scrollfixed（{sixed： 'left'}）;
$（ '＃rightsider'）。scrollfixed（{sixed： 'right'}）;