Rumah >hujung hadapan web >tutorial js >Pemalam jQuery StickUp melaksanakan navigasi teratas halaman web_jquery
StickUp, pemalam navigasi tetap elemen halaman web jQuery yang praktikal, ialah pemalam jQuery mudah yang merealisasikan penetapan elemen halaman web Sebagai contoh, navigasi dibetulkan supaya ia sentiasa kelihatan dalam paparan. Kesannya boleh dilihat dalam halaman satu halaman Semua orang Anda boleh mengkajinya.
Cara menggunakan:
1. Muatkan pemalam dan 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>
2.Kandungan HTML (letak letak 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>
3. Panggilan fungsi
<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>
Lihat DEMO Muat turun sekarang
Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang untuk menggunakan jQuery dengan cekap.