Использование позиции в стиле CSS «: фиксированное» позволяет фиксировать блок DIV в фиксированном положении, и его положение не будет изменено, даже если есть полоса прокрутки. Положение: Фиксированное принесло удивительные эффекты многим разработчикам, но когда появляются горизонтальные полосы прокрутки, эффект не так легко принять. Иногда мы надеемся, что, когда появляется горизонтальная полоса прокрутки, блок DIV может двигаться влево и вправо с помощью полоса прокрутки, достижение вертикального фиксированного позиционирования (фиксированного) и горизонтального относительного позиционирования (абсолютное). Эта статья предоставляет решение с исходным кодом расширения JQUERY.
Метод реализации этой статьи заключается в том, чтобы использовать JS для управления блоком DIV для прокрутки горизонтали с помощью полосы прокрутки время. Положение: фиксированная модификация стиля, когда необходим блок DIV.
Когда блок div фиксируется горизонтально относительно правой стороны браузера, то, когда в окне происходит прокрутка или изменение размера, его значение правого стиля обновляется, и его значение должно быть:
Кода -копия выглядит следующим образом:
var new_right = ($ (window) .scrollleft () + $ (window) .width () - $ (document) .width () + riginal_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;
база. $ el = $ (el);
base.el = el;
var target = base. $ el;
var original_left = parseint (target.css ('left'));
var riginal_right = parseint (target.css ('right'));
var _fix_position = function () {
if (base.options.fixed == 'right') {
target.css ('right', ($ (window) .scrollleft () + $ (window) .width () - $ (document) .width () + riginal_right) + 'px');
} else if (base.options.fixed == 'left') {
target.css ('left', (original_left - $ (window) .scrollleft ()) + 'px');
}
};
var windowsresize = function () {
_fix_position ();
};
var windowscroll = function () {
_fix_position ();
};
base.init = function () {
base.options = $.
$ (window) .resize (windowresize);
$ (window) .scroll (WindowsCroll);
_fix_position ();
console.log (base.options.fixed);
};
base.init ();
};
$ .Scrollfixed.defaultoptions = {
Исправлено: 'Left'
};
$ .fn.scrollfixed = function (options) {
вернуть это.
(новый $ .scrollfixed (это, опции));
});
};
}) (jQuery);
Примеры использования:
Кода -копия выглядит следующим образом:
$ ('#leftsider'). Scrollfixed ({fixed: 'Left'});
$ ('#rightsider'). scrollfixed ({исправлен: 'right'});