Guide d'utilisation du plug-in d'élément fixe jQuery scrolltofixed_jquery

J'ai utilisé ce plugin une fois il y a quelques temps, lors d'un changement de site internet. Exiger que la barre de menu supérieure soit corrigée lorsque la barre de défilement défile. J'en ai également parlé en général, mais je ne l'ai mentionné que dans l'article Adresse : position de l'élément fixe du plug-in jQuery. Dans cet article, nous le résumerons à nouveau.

1.fonction de plug-in scrolltofixed

Fixez la position d'un élément pour que l'élément reste affiché lorsque la page défile.

II.scrolltofixed adresse officielle

https://github.com/bigspotteddog/ScrollToFixed. Vous trouverez des instructions d'utilisation sur l'adresse officielle et des descriptions des propriétés et méthodes du plug-in ci-dessous. Il existe également des cas d'utilisation détaillés dans la démo, vous pouvez la télécharger et y jeter un œil.

3. Comment utiliser scrolltofixed

Le plug-in scrolltofixed a un large éventail d'utilisations. Nous pouvons réparer le haut, la barre latérale ou "réparer n'importe quel élément de la page". En l'utilisant avec d'autres plug-ins, vous pouvez obtenir de très bons résultats. Si la barre de défilement est détectée pour atteindre une certaine position, un certain élément sera affiché. Dans le cas de test, nous utilisons le plug-in scrolltofixed avec le plug-in scrollto. L'effet spécifique peut être vu dans le "fichier de test" ci-dessous.

1. Fichiers de référence

Le plug-in scrolltofixed est très simple à utiliser, il suffit de citer deux js. Un fichier est jquery et l'autre est le fichier js requis par le plug-in scrolltofixed.

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

Fichier de style 2.css. Il n'est pas nécessaire d'avoir un fichier de style pour utiliser le plug-in, mais nous devons définir des éléments à position fixe, et les éléments nécessitent nos propres styles personnalisés. Le fichier de style n'est pas publié ici, vous pouvez voir le "fichier de test" ci-dessous.

Code 3.js. L'initialisation peut être réalisée en une seule phrase, ou les propriétés d'initialisation peuvent être définies selon les besoins. Comme le style de l'élément, le style affiché lorsqu'il est fixe, quel élément est atteint, l'élément fixe n'est plus fixe, etc. Vous pouvez regarder la démo officielle.

//Cet article teste uniquement les éléments fixes et utilise les attributs par défaut
$('#operbox').scrollToFixed();

4. HTML utilisé. Les éléments à position fixe doivent utiliser du HTML. Vous pouvez voir le "Fichier de test" ci-dessous.

Lors du test du plug-in scrolltofixed, afin d'améliorer l'efficacité du scénario de test, le plug-in scrollto est également utilisé. Le plug-in scrollto est utilisé pour faire défiler jusqu'à l'élément spécifié.
Environnement de test : navigateur IE8, chrome, firefox. Résultats des tests :

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.