Le plug-in jQuery StickUp implémente la navigation supérieure des pages Web

Le plug-in jQuery StickUp implémente la navigation supérieure des pages Web_jquery

WBOY

Libérer： 2016-05-16 16:04:42

original

1121 Les gens l'ont consulté

StickUp, un plug-in de navigation fixe pour éléments de page Web jQuery pratique, est un simple plug-in jQuery qui réalise la correction des éléments de page Web. Par exemple, la navigation est fixe pour qu'elle soit toujours visible dans la vue. L'effet peut être vu sur la page d'une page. Tout le monde peut l'étudier.

Comment utiliser :

1. Charger les plug-ins et jQuery

<script src="js/jquery.js">script> 
<script src="js/stickUp.min.js">script> 
<link href="stickup.css" rel="stylesheet"> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<script src="js/bootstrap.min.js">script>

Copier après la connexion

2.Contenu HTML (mise en page Bootstrap)

 
  <div class="navbar-wrapper"> 
   <div class="container"> 
   <div class="navwrapper"> 
    <div class="navbar navbar-inverse navbar-static-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#"><stickUpa> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="menuItem active"><a href="#home">Homea</li> 
        <li class="menuItem"><a href="#features">Featuresa</li> 
        <li class="menuItem"><a href="#updates">Updatesa</li> 
        <li class="menuItem"><a href="#installation">Installationa</li> 
        <li class="menuItem"><a href="#one-pager">One Pagera</li> 
        <li class="menuItem"><a href="#extras">Extrasa</li> 
        <li class="menuItem"><a href="#wordpress">Wordpressa</li> 
        <li class="menuItem"><a href="#contact">Contacta</li>   
       </ul> 
      </div> 
     </div> 
    </div> 
   </div>

Copier après la connexion

3. Appel de fonction

<script type="text/javascript"> 
     //initiating jQuery  
     jQuery(function($) { 
      $(document).ready( function() { 
        //enabling stickUp on the '.navbar-wrapper' class 
        $('.navbar-wrapper').stickUp({ 
                parts: { 
                 0:'home', 
                 1:'features', 
                 2: 'news', 
                 3: 'installation', 
                 4: 'one-pager', 
                 5: 'extras', 
                 6: 'wordpress', 
                 7: 'contact' 
                }, 
                itemClass: 'menuItem', 
                itemHover: 'active' 
               }); 
        }); 
       }); 
<script>

Copier après la connexion

Voir la DÉMO Télécharger maintenant

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde d'utiliser jQuery avec compétence.