Uso de la posición de estilo CSS ": fijo" permite que el bloque Div se fije en una posición fija, y su posición no se cambiará incluso si hay una barra de desplazamiento. Posición: Fixed ha traído efectos sorprendentes a muchos desarrolladores, pero cuando aparecen las barras de desplazamiento horizontal, el efecto no es tan fácil de aceptar. A veces esperamos que cuando aparezca una barra de desplazamiento horizontal, el bloque DIV puede moverse hacia la izquierda y hacia la derecha con la barra de desplazamiento, logrando posicionamiento vertical fijo (fijo) y posicionamiento relativo horizontal (absoluto). Este artículo proporciona una solución, con el código fuente de JQuery Extension.
El método de implementación de este artículo es usar JS para controlar el bloque DIV para desplazarse horizontalmente con la barra de desplazamiento es actualizar el valor izquierdo o derecho del bloque DIV a la posición izquierda o derecha del navegador. tiempo. La posición: modificación de estilo fijo cuando se necesita el bloque DIV.
Cuando el bloque DIV se fija horizontalmente en relación con el lado derecho del navegador, luego, cuando ocurre un evento de desplazamiento o cambio de tamaño en el objeto de la ventana, su valor de estilo derecho se actualiza y su valor debe ser:
La copia del código es la siguiente:
var new_right = ($ (Window) .scrollleft () + $ (ventana) .Width () - $ (documento) .Width () + original_right) + 'PX'
Cuando el bloque DIV se fija en la dirección horizontal en relación con el lado izquierdo del navegador, luego, cuando ocurre un evento de desplazamiento o cambio de tamaño en el objeto de la ventana, su valor de estilo izquierdo se actualiza y su valor debe ser:
La copia del código es la siguiente:
var new_left = (original_left - $ (ventana) .scrollleft ()) + 'px'
El original_left y original_right aparecen en el código anterior son los valores izquierdo y derecho del bloque DIV original. El código de extensión JQuery completo es el siguiente:
La copia del código es la siguiente:
(función ($) {
$ .Scrollfixed = function (el, opciones) {
var base = this;
base. $ el = $ (el);
base.el = El;
Var Target = Base. $ El;
var original_left = parseInt (target.css ('izquierda'));
var original_right = parseInt (target.css ('right'));
var _fix_position = function () {
if (base.options.fixed == 'Right') {
Target.css ('Right', ($ (Window) .Scrollleft () + $ (Window) .Width () - $ (documento) .Width () + original_right) + 'Px');
} else if (base.options.fixed == 'izquierda') {
Target.css ('Left', (original_left - $ (ventana) .scrollleft ()) + 'px');
}
};
var windowResize = function () {
_fix_position ();
};
var windowscroll = function () {
_fix_position ();
};
base.init = function () {
base.options = $ .extend ({}, $ .scrollfixed.defaultOptions, opciones);
$ (ventana) .resize (WindowResize);
$ (ventana) .scroll (windowscroll);
_fix_position ();
console.log (base.options.fixed);
};
base.init ();
};
$ .Scrollfixed.defaultOptions = {
FIJO: 'Izquierda'
};
$ .fn.scrollfixed = function (opciones) {
devuelve this.each (function () {
(nuevo $ .scrollfixed (this, opciones));
});
};
}) (jQuery);
Ejemplos de uso:
La copia del código es la siguiente:
$ ('#LeftSider'). ScrollFixed ({fijo: 'izquierda'});
$ ('#Rightsider'). ScrollFixed ({fijo: 'correcto'});