Le plugin de navigation supplémentaire (APPIX) permet à un <div> d'être épinglé quelque part sur la page. Vous pouvez également basculer entre activer ou désactiver à l'aide du plugin. Un exemple courant est les icônes sociales. Ils commenceront quelque part, mais lorsque la page cliquera sur une marque, le <div> se verrouille quelque part et ne fait pas défiler avec le reste de la page.
Si vous souhaitez référencer la fonctionnalité du plugin séparément, vous devez référencer Affix.js.
1. Utilisation
Des plug-ins de navigation supplémentaires (affix) peuvent être utilisés via les propriétés de données ou via JavaScript.
1. Grâce aux attributs de données: si vous devez ajouter un comportement de navigation (affixe) supplémentaire à l'élément, vous n'avez qu'ajouter Data-Spy = "Affix" à l'élément que vous devez écouter. Utilisez des décalages pour définir lorsque vous faites basculer le verrouillage et le mouvement des éléments.
2. Via JavaScript: vous pouvez ajouter manuellement une navigation supplémentaire à un élément via JavaScript (affix)
2. Positionner à travers CSS
Dans les deux façons ci-dessus d'utiliser le plug-in Affix, vous devez localiser le contenu via CSS. Le plug-in de navigation supplémentaire (APPIX) bascule entre trois classes, chacune présente un état spécifique: .Affix, .Affix-top et .Affix-Bottom. Veuillez suivre les étapes ci-dessous pour configurer votre propre CSS pour ces trois états (sans compter sur ce plugin).
1. Au début, le plugin ajoute. Aucun positionnement CSS n'est requis pour le moment.
2. Lors du défilement des éléments avec une navigation supplémentaire (affixe) ajouté, la navigation supplémentaire réelle (affixe) doit être déclenchée. À l'heure actuelle, .Affix remplacera. Affix-TOP et Set Position: Fixed; (Fourni par le code CSS de Bootstrap).
3. Si le décalage inférieur est défini, lorsque le défilement atteint cette position, remplacez. Affix par. Affix-Bottom. Étant donné que le décalage est facultatif, si le décalage est défini, un CSS approprié doit être défini en même temps. Dans ce cas, ajoutez la position: absolue; si nécessaire.
3. Options
Certaines options sont passées par les propriétés de données ou JavaScript. Le tableau suivant répertorie ces options:
Iv. Exemples
Une navigation supplémentaire signifie le coller quelque part à l'écran pour réaliser la fonction d'ancrage.
1. Exemples de base
<body data-spy = "scroll" data-target = "# myscrollspy"> <div> <div style = "height: 150px"> <h1> Bootstrap affix </h1> </div> <div> <div id = "myscrollSpy"> <ul data-spy = "postix" Data-top = "150"> <li> <a href = "# section-" section 1/a <150 "> <li> <a href =" # section-> Part 1 <1/a>> <li> <a href = "# section-" section 1/a <150 "> <li> <a href =" # section- "section 1/a <150"> <li> <a href = "# section-" section 1/a <150 "> <li> <a Href =" # section " </li> <li> <a href = "# section-2"> Partie 2 </a> </li> <li> <a href = "# section-3"> Partie 3 </a> </li> <li> <a href = "# section-4"> Partie 4 </a> </li> <li> <a href = "# section-4"> Partie 5 </a> <h2 id = "section-1"> Partie 1 </h2> <p> ... </p> <h2 id = "section-2"> Partie 2 </h2> <p> ... </p> <h2 id = "Section-3"> Partie 3 </H2> <p> ... </p> <h2 id = "Section-4"> Part 4 </h2> <p> ... ... </p> <h ID = "> Partie"> </h2> <p> ... ... 4 </h2> <p> ... </p> </div> </div> </div>
2. La partie CSS de la navigation
ul.nav-pills {width: 200px;} ul.nav-ps.affix {top: 30px;} // javascript au lieu de data-spy = "affix" data-offset-top = "125" $ ('# myAffix'). Affix ({offset: {top: 150}}))Nous utilisons le haut par défaut, et bien sûr, nous pouvons également utiliser le bas par défaut. Cette méthode de positionnement est directement positionnée via CSS.
// Défini sur bottomul.nav-tabs.affix-bottom {inférieur: 30px;} // défini sur Bottom $ ('# myAffix'). Affix ({offset: {en bas: 150}})Affix contient plusieurs événements, comme suit:
// d'autres $ similaires ('# myAffix'). On ('apposé-top.bs.affix', function () {alert ('Trigger!');});Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.