L'utilisation du style CSS "position: fixe" permet de fixer le bloc DIV en position fixe, et sa position ne sera pas modifiée même s'il y a une barre de défilement. Position: Correction a apporté des effets incroyables à de nombreux développeurs, mais lorsque des barres de défilement horizontales apparaissent, l'effet n'est pas si facile à accepter. Parfois, nous espérons que lorsqu'une barre de défilement horizontale apparaît, le bloc DIV peut se déplacer à gauche et à droite avec la barre de défilement, atteignant le positionnement fixe vertical (fixe) et le positionnement relatif horizontal (absolu). Cet article fournit une solution, avec le code source d'extension jQuery.
La méthode de mise en œuvre de cet article est d'utiliser JS pour contrôler le bloc Div pour faire défiler horizontalement la barre de défilement. temps. La position: modification du style fixe lorsque le bloc Div est nécessaire.
Lorsque le bloc DIV est fixe horizontalement par rapport au côté droit du navigateur, alors lorsqu'un événement de défilement ou de redimensionnement se produit dans l'objet Window, sa valeur de style droit est mise à jour et sa valeur doit être:
La copie de code est la suivante:
var new_right = ($ (fenêtre) .scrollleft () + $ (fenêtre) .Width () - $ (document) .width () + original_right) + 'px'
Lorsque le bloc DIV est fixé dans la direction horizontale par rapport au côté gauche du navigateur, alors lorsqu'un événement de défilement ou de redimensionnement se produit dans l'objet de fenêtre, sa valeur de style gauche est mise à jour et sa valeur doit être:
La copie de code est la suivante:
var new_left = (original_left - $ (fenêtre) .scrollleft ()) + 'px'
Les valeurs d'original_left et d'original apparaissent dans le code ci-dessus sont les valeurs gauche et droite du bloc Div d'origine. Le code d'extension JQuery complet est le suivant:
La copie de code est la suivante:
(fonction ($) {
$ .ScrollFixed = fonction (el, options) {
var base = this;
base. $ el = $ (el);
base.el = el;
var cible = base. $ el;
var original_left = parseInt (target.css ('gauche'));
var original_right = parseInt (target.css ('droit'));
var _fix_position = function () {
if (base.options.fixed == 'droite') {
Target.css ('droite', ($ (fenêtre) .scrollleft () + $ (fenêtre) .width () - $ (document) .width () + original_right) + 'px');
} else if (base.options.fixed == 'Left') {
Target.css ('Left', (original_left - $ (fenêtre) .scrollleft ()) + 'px');
}
};
var windowResize = function () {
_fix_position ();
};
var windowscroll = function () {
_fix_position ();
};
base.init = function () {
base.options = $ .extend ({}, $ .scrollFixed.defaultOptions, Options);
$ (fenêtre) .resize (windowSize);
$ (fenêtre) .scroll (windowscroll);
_fix_position ();
console.log (base.options.fixed);
};
base.init ();
};
$ .ScrollFixed.defaultOptions = {
Fixé: «gauche»
};
$ .fn.scrollFixed = fonction (options) {
return this.each (function () {
(nouveau $ .ScrollFixed (this, options));
});
};
}) (jQuery);
Exemples d'utilisation:
La copie de code est la suivante:
$ ('# LeftSider'). ScrollFixed ({Fixed: 'Left'});
$ ('# RightsIder'). ScrollFixed ({Fixed: 'Right'});