実用的な jQuery Web ページ要素固定ナビゲーション プラグイン StickUp は、Web ページ要素の固定を実現するシンプルな jQuery プラグインで、たとえば、ナビゲーションが常にビューに表示されるようにします。 1ページで効果がわかりますので、どなたでもお勉強いただけます。
使用方法:
1. プラグインと 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.HTML コンテンツ (ブートストラップ レイアウト)
<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. 関数呼び出し
<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>
以上がこの記事の全内容であり、皆さんが jQuery を使いこなすのに役立つことを願っています。