O uso do estilo CSS "Posição: Fixed" permite que o bloco Div seja fixo em uma posição fixa, e sua posição não será alterada, mesmo se houver uma barra de rolagem. Posição: Fixed trouxe efeitos surpreendentes a muitos desenvolvedores, mas quando as barras de rolagem horizontal aparecem, o efeito não é tão fácil de aceitar. Às vezes, esperamos que, quando uma barra de rolagem horizontal aparecer, o bloco Div possa se mover para a esquerda e direita com a barra de rolagem, alcançando o posicionamento fixo vertical (fixo) e o posicionamento relativo horizontal (absoluto). Este artigo fornece uma solução, com código -fonte de extensão do jQuery.
O método de implementação deste artigo é usar o JS para controlar o bloco Div para rolar horizontalmente com a barra de rolagem tempo. A posição: modificação de estilo fixo quando o bloco div.
Quando o bloco Div é fixo horizontalmente em relação ao lado direito do navegador, quando um evento de rolagem ou redimensionamento ocorre no objeto da janela, seu valor à direita é atualizado e seu valor deve ser:
A cópia do código é a seguinte:
var new_right = ($ (janela) .ScrollLeft () + $ (janela) .Width () - $ (documento) .Width () + original_right) + 'px'
Quando o bloco Div é fixo na direção horizontal em relação ao lado esquerdo do navegador, quando um evento de rolagem ou redimensionamento ocorre no objeto da janela, seu valor de estilo esquerdo é atualizado e seu valor deve ser:
A cópia do código é a seguinte:
var new_left = (original_left - $ (janela) .scrollleft ()) + 'px'
O original_left e o original_right aparecem no código acima são os valores esquerdo e direito do bloco div original. O código completo de extensão do jQuery é o seguinte:
A cópia do código é a seguinte:
(função ($) {
$ .Scrollfixed = function (el, opções) {
var base = this;
base. $ el = $ (el);
base.el = el;
var no destino = base. $ el;
var original_left = parseint (Target.css ('esquerda'));
var original_right = parseint (Target.css ('direita'));
var _fix_position = function () {
if (base.options.fixed == 'Right') {
Target.css ('direita', ($ (janela) .ScrollLeft () + $ (janela) .Width () - $ (documento) .Width () + original_right) + 'px');
} else if (base.options.fixed == 'esquerda') {
Target.css ('esquerda', (original_left - $ (janela) .ScrollLeft ()) + 'px');
}
};
var windowResize = function () {
_fix_position ();
};
var windowscroll = function () {
_fix_position ();
};
base.init = function () {
base.Options = $ .Extend ({}, $ .Scrollfixed.DefaultOptions, Opções);
$ (janela) .Resize (WindowResize);
$ (janela) .scroll (Windowscroll);
_fix_position ();
console.log (base.options.fixed);
};
base.init ();
};
$ .ScrollFixed.DefaultOptions = {
Corrigido: 'Esquerda'
};
$ .fn.scrollfixed = function (options) {
Retorne this.Each (function () {
(novo $ .Scrollfixed (isto, opções));
});
};
}) (jQuery);
Exemplos de uso:
A cópia do código é a seguinte:
$ ('#lesftsider'). scrollfixed ({corrigido: 'esquerda'});
$ ('#Direitos'). Scrollfixed ({corrigido: 'Right'});