jQuery-Plug-in für feste Elemente scrolltofixed Verwendungsleitfaden_jquery

Ich habe dieses Plug-in vor einiger Zeit einmal verwendet, als ich eine Website geändert habe. Erfordert, dass die obere Menüleiste beim Scrollen der Bildlaufleiste fixiert wird. Ich habe auch allgemein darüber geschrieben, es aber nur in der Artikeladresse erwähnt: jQuery-Plug-in mit fester Elementposition. In diesem Artikel fassen wir es noch einmal zusammen.

1.scrolltofixed Plug-in-Funktion

Fixieren Sie die Position eines Elements, sodass das Element beim Scrollen der Seite angezeigt bleibt.

II.scrollenzurfesten offiziellen Adresse

https://github.com/bigspotteddog/ScrollToFixed. Anweisungen zur Verwendung finden Sie unter der offiziellen Adresse sowie Beschreibungen der Eigenschaften und Methoden des Plug-Ins unten. Die Demo enthält auch detaillierte Anwendungsfälle. Sie können sie herunterladen und ansehen.

3. So verwenden Sie scrolltofixed

Das scrolltofixed-Plug-in bietet vielfältige Einsatzmöglichkeiten. Wir können den oberen Rand, die Seitenleiste oder „jedes Element auf der Seite reparieren“. Durch die Verwendung mit anderen Plug-Ins können Sie sehr gute Ergebnisse erzielen. Wenn erkannt wird, dass die Bildlaufleiste eine bestimmte Position erreicht, wird ein bestimmtes Element angezeigt. Im Testfall verwenden wir das scrolltofixed-Plugin zusammen mit dem scrollto-Plugin. Der spezifische Effekt ist in der „Testdatei“ unten zu sehen.

1. Referenzdateien

Das scrolltofixed-Plug-in ist sehr einfach zu verwenden, Sie müssen nur zwei js zitieren. Eine Datei ist jquery und die andere ist die js-Datei, die für das scrolltofixed-Plug-in erforderlich ist.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-scrolltofixed.js"></script>

2.css-Stildatei. Für die Verwendung des Plug-Ins ist keine Stildatei erforderlich, wir müssen jedoch Elemente mit fester Position definieren, und die Elemente erfordern unsere eigenen benutzerdefinierten Stile. Die Stildatei wird hier nicht veröffentlicht, Sie können die „Testdatei“ unten sehen.

3.js-Code. Die Initialisierung kann in einem Satz erfolgen oder die Initialisierungseigenschaften können nach Bedarf festgelegt werden. Zum Beispiel der Stil des Elements, der Stil, der beim Fixieren angezeigt wird, welches Element erreicht wird, das fixierte Element ist nicht mehr fixiert usw. Sie können sich die offizielle Demo ansehen.

//Dieser Artikel testet nur feste Elemente und verwendet Standardattribute
$('#operbox').scrollToFixed();

4. Verwendetes HTML. Elemente mit fester Position müssen HTML verwenden. Sie können die „Testdatei“ unten sehen.

Um die Effizienz des Testfalls zu verbessern, wird beim Testen des Scrollto-Plug-Ins auch das Scrollto-Plug-In verwendet, um zum angegebenen Element zu scrollen.
Testumgebung: IE8-Browser, Chrome, Firefox. Testergebnisse:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.