Use CSS style position: fixed to scroll horizontally

Use CSS style position: fixed to scroll horizontally

This article describes how to use the CSS style position: fixed for horizontal scrolling. For more information, see

You can use the CSS style "position: fixed" to fix the div block in a fixed position without changing its position even if a scroll bar exists. 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 div block can move around 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 the div block with the scroll bar. The principle is to update the left or right values of the div block 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 the div block is required.

 

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

Copy the Code as follows:

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

 

When the div 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 div block. 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 '});