Position:fixed horizontal scrolling by using CSS styles _jquery

Using the CSS style "position:fixed" allows the div block to be fixed in a fixed position, even if there is a scroll bar that does not change its position. Position:fixed has been a stunning effect for many developers, but when the horizontal scroll bar appears, the effect is not so easy to accept. Sometimes we hope that when the horizontal scroll bar appears, the DIV block can move around with the scroll bar to achieve vertical fixed positioning (fixed), horizontal relative positioning (absolute). This article provides a workaround, with jquery extension source.

The implementation of this article is to use JS to control the DIV block scrolling horizontally with the scroll bar, the principle is that when the Window object occurs scroll event and resize event, update the left or right value of the div block, so that it relative to the browser on the left-hand side of the position and immediately change. The div block needs to be position:fixed style decorated.

When the div block is fixed horizontally relative to the right of the browser, when the Window object occurs scroll or resize event, its right style value is updated, and the value should be:

Copy Code code as follows:

var new_right = ($ (window). ScrollLeft () + $ (window). Width ()-$ (document). Width () + original_right) + ' px '

When the div block is fixed horizontally relative to the left of the browser, when the Window object occurs, the scroll or resize event is updated, and the value should be:

Copy Code code as follows:

var new_left = (Original_left-$ (window). ScrollLeft ()) + ' px '

The Original_left and original_right that appear in the above code are the left and right values of the original div block. The full jquery extension code is as follows:

Copy Code code 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);

Use instance:

Copy Code code as follows:

$ (' #leftsider '). Scrollfixed ({fixed: ' left '});
$ (' #rightsider '). Scrollfixed ({fixed: ' right '});