Die Verwendung der CSS -Style "Position: Fix" ermöglicht es dem Div -Block in einer festen Position, und seine Position wird nicht geändert, selbst wenn ein Scroll -Balken vorhanden ist. Position: Fixed hat viele Entwickler erstaunliche Auswirkungen gebracht, aber wenn horizontale Bildlaufleisten auftreten, ist der Effekt nicht so einfach zu akzeptieren. Manchmal hoffen wir, dass, wenn ein horizontaler Bildlaufleisten erscheint, der Div -Block mit der Bildlaufleiste nach links und rechts bewegen kann, wodurch die vertikale feste Positionierung (fest) und die horizontale relative Positionierung (absolut) erreicht werden. Dieser Artikel enthält eine Lösung mit JQuery -Erweiterungsquellcode.
Die Implementierungsmethode dieses Artikels besteht darin, den DIV -Block zu steuern, um mit der Bildlaufleiste horizontal zu scrollen Zeit. Die Position: Modifikation mit fester Stil, wenn der Div -Block benötigt wird.
Wenn der Div-Block horizontal relativ zur rechten Seite des Browsers festgelegt ist, wird im Fensterobjekt ein Bildschirm oder eine Größe des Größengrößens auftritt, sein Wert des rechten Stils wird aktualisiert und sein Wert sollte sein:
Die Codekopie lautet wie folgt:
var new_right = ($ (Fenster) .Scrollleft () + $ (Fenster) .Width () - $ (Dokument) .Width () + original_right) + 'px'
Wenn der DIV-Block in horizontaler Richtung relativ zur linken Seite des Browsers fixiert ist, wird im Fensterobjekt ein Bildlauf oder eine Größe des Größengrößens auftritt, der linke Wert wird aktualisiert und sein Wert sollte sein:
Die Codekopie lautet wie folgt:
var new_left = (Original_Left - $ (Fenster) .Scrollleft ()) + 'px'
Das Original_Left und das Original_Right im obigen Code sind die linken und rechten Werte des ursprünglichen Div -Blocks. Der vollständige JQuery -Erweiterungscode lautet wie folgt:
Die Codekopie lautet wie folgt:
(Funktion ($) {
$ .ScrollFixed = Funktion (el, Optionen) {
var base = this;
Basis. $ el = $ (el);
Basis.el = el;
var target = base. $ el;
var original_left = parseInt (target.css ('links'));
var original_right = parseInt (target.css ('rechts'));
var _fix_position = function () {
if (base.options.fixed == 'rechts') {
target.css ('rechts', ($ (Fenster) .Scrollleft () + $ (Fenster) .Width () - $ (Dokument) .Width () + original_right) + 'px');
} else if (base.options.fixed == 'links') {
target.css ('links', (original_left - $ (Fenster) .Scrollleft ()) + 'px');
}
};
var windowResize = function () {
_fix_position ();
};
var WindowsCroll = function () {
_fix_position ();
};
Base.init = function () {
Base.Options = $ .extend ({}, $ .ScrollFixed.DefaultOptions, Optionen);
$ (Fenster) .Resize (windowResize);
$ (Fenster) .Scroll (WindowsCroll);
_fix_position ();
console.log (base.options.fixed);
};
Base.init ();
};
$ .ScrollFixed.DefaultOptions = {
behoben: 'links'
};
$ .fn.ScrollFixed = Funktion (Optionen) {
Gibt this.each (function () {zurück
(neue $ .ScrollFixed (diese, Optionen));
});
};
}) (jQuery);
Beispiele für die Nutzung:
Die Codekopie lautet wie folgt:
$ ('#linkssider'). scrollFixed ({{behoben: 'links'});
$ ('#Rightsider'). ScrollFixed ({{fix: 'rechts'});