Bootstrap doit apprendre chaque jour des compétences supplémentaires en matière de plug-in de navigation (Affix)

Le plugin Affix permet de fixer un

à un certain endroit de la page. Vous pouvez également activer ou désactiver l’utilisation du plugin. Un exemple courant est celui des icônes sociales. Ils commenceront à une certaine position, mais lorsqu'on clique sur une marque sur la page, le

sera verrouillé en position et ne défilera pas avec le reste de la page.
Si vous souhaitez référencer les fonctionnalités du plugin individuellement, vous devez alors référencer affix.js.

1. Utilisation

Le plugin Affix peut être utilisé via l'attribut de données ou via JavaScript.
1. Via l'attribut data : si vous devez ajouter un comportement de navigation (Affix) supplémentaire à un élément, il vous suffit d'ajouter data-spy="affix" à l'élément qui doit être surveillé. Utilisez les décalages pour définir quand activer/désactiver le verrouillage et le déplacement d'un élément.
2. Via JavaScript : vous pouvez ajouter manuellement une navigation supplémentaire (Affix) à un élément via JavaScript

2. Positionnement via CSS

Dans les deux manières ci-dessus d'utiliser le plugin Affix, vous devez positionner le contenu via CSS. Le plug-in Attached Navigation (Affix) bascule entre trois classes, chacune présentant un état spécifique : .affix, .affix-top et .affix-bottom. Veuillez suivre les étapes ci-dessous pour définir votre propre CSS pour ces trois états (sans compter sur ce plugin).
1. Au début, le plugin ajoute .affix-top pour indiquer que l'élément est en première position. Aucun positionnement CSS n’est requis pour le moment.
2. Lors du défilement d'un élément avec une navigation supplémentaire (Affixe) ajoutée, la navigation supplémentaire réelle (Affixe) doit être déclenchée. À ce stade, .affix remplacera .affix-top et définira 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, .affix doit être remplacé par .affix-bottom. Étant donné que le décalage est facultatif, sa définition nécessite que le CSS approprié soit également défini. Dans ce cas, ajoutez position: absolue;

3.Options

Certaines options sont transmises via des attributs de données ou JavaScript. Les options sont répertoriées dans le tableau ci-dessous :

4. Exemples
Une navigation supplémentaire est collée quelque part sur l'écran pour implémenter la fonction d'ancrage.
1. Exemples de base

<body data-spy="scroll" data-target="#myScrollspy">

 <div class="container">
 <div class="jumbotron" style="height:150px">
  <h1>Bootstrap Affix</h1>
 </div>
 <div class="row">
  <div class="col-xs-3" id="myScrollspy">
  <ul class="nav nav-pills nav-stacked" data-spy="affix"data-offset-top="150">
   <li class="active">
   <a href="#section-1">第一部分 </a>
   </li>
   <li>
   <a href="#section-2">第二部分</a>
   </li>
   <li>
   <a href="#section-3">第三部分</a>
   </li>
   <li>
   <a href="#section-4">第四部分</a>
   </li>
   <li>
   <a href="#section-4">第五部分</a>
   </li>
  </ul>
  </div>
  <div class="col-xs-9">
  <h2 id="section-1">第一部分</h2>
  <p>
   ...
  </p>
  <h2 id="section-2">第二部分</h2>
  <p>
   ...
  </p>
  <h2 id="section-3">第三部分</h2>
  <p>
   ...
  </p>
  <h2 id="section-4">第四部分</h2>
  <p>
   ...
  </p>
  <h2 id="section-5">第四部分</h2>
  <p>
   ...
  </p>
  </div>

 </div>
 </div>

Copier après la connexion

2. Partie CSS de la navigation

ul.nav-pills {
 width: 200px;
}
ul.nav-pills.affix {
 top: 30px;
}
//JavaScript 代替 data-spy="affix" data-offset-top="125"

$('#myAffix').affix({
 offset : {
 top : 150
 }
})

Copier après la connexion

Nous utilisons top par défaut, mais bien sûr, cela peut aussi être bottom par défaut. Cette méthode de positionnement est positionnée directement via CSS.

//设置成 bottom

ul.nav-tabs.affix-bottom {
 bottom: 30px;
}
//设置成 bottom

$('#myAffix').affix({
 offset : {
 bottom : 150
 }
})

Copier après la connexion

L'affixe contient plusieurs événements, comme suit :

//其他雷同

$('#myAffix').on('affixed-top.bs.affix', function() {
 alert('触发！');
});

Copier après la connexion

Pour plus d'informations, veuillez vous référer à : Tutoriel d'apprentissage Bootstrap

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Étiquettes associées：

Bootstrap附加导航插件 Bootstrap导航插件 Bootstrap附加导航Affix插件

source：php.cn

Article précédent：Plug-in de la page à onglet (Tab) à apprendre absolument tous les jours_compétences Javascript de Bootstrap Article suivant：Explication détaillée des compétences du composant_javascript du bouton Bootstrap

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur