Use CSS style position: fixed to scroll horizontally _ jquery

This article describes how to use the CSS style position: fixed for horizontal scrolling. If you need it, refer to the CSS style "position: fixed" to fix the p block in a fixed position, the position of a scroll bar is not changed. Position: fixed has brought amazing results to many developers. However, when a horizontal scroll bar appears, the effect is not so easy to accept. Sometimes we hope that when a horizontal scroll bar appears, the p block can move along the left and right sides of the scroll bar to implement a vertical fixed position (fixed) and a horizontal relative position (absolute ). This article provides a solution with jquery extension source code.

The implementation method in this article is to use js to control the horizontal scrolling of p blocks with the scroll bar. The principle is to update the left or right values of p blocks when the scroll and resize events occur on the window object, changes the position on the left or right of the browser in real time. Position: fixed style modification when p blocks are required.

When the p block is relatively fixed to the right of the browser in the horizontal direction, the right style value of the window object is updated when the scroll or resize event occurs. The value should be:

The Code is as follows:

Var new_right = ($ (window). scrollLeft () + $ (window). width ()-$ (document). width () + original_right) + 'px'

When the p block is relatively fixed to the left of the browser in the horizontal direction, the left style value is updated when a scroll or resize event occurs on the window object. The value should be:

The Code is as follows:

Var new_left = (original_left-$ (window). scrollLeft () + 'px'

The original_left and original_right values in the above Code are the left and right values of the original p blocks. The complete jquery extension code is as follows:

The Code is as follows:

(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 );

Instance used:

The Code is as follows:

$ ('# Leftsider'). scrollFixed ({fixed: 'left '});
$ ('# Rightsider'). scrollFixed ({fixed: 'right '});