jQueryプラグインStickUp Webナビゲーショントップを実現

実用的なjQueryページ要素固定ナビゲーショントッププラグインStickUp、簡単なjQueryプラグイン、ページ要素固定を実現し、ナビゲーション固定が常にビューに保たれるようにすれば、one-pageページで効果が見られるので、研究することができます.
使用方法:
1.プラグインとjQueryのロード

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> 
</pre> 
 </div> 
 <p>2.HTML  (Bootstrap  )<br> </p> 
 <div class="jb51code"> 
  <pre class="brush:xhtml;">
 
  <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> 
</pre> 
 </div> 
 <p>3.    <br> </p> 
 <div class="jb51code"> 
  <pre class="brush:js;">
<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> 
</pre> 
 </div> 
 <p>  DEMO       </p> 
 <p>              ，         jQuery      。</p> 
 <div class="clearfix"> 
  <span id="art_bot" class="jbTestPos"></span> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1176565566522077184"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">
                    
                     
                

興味があるかもしれません

プロジェクト内の列挙と注釈の組み合わせの使用
飛ぶベスト
java enum annotation

【Scala十七】Scalaコア十一：下線_の使い方
bit1129
scala

Webキャッシュベース:用語、httpヘッダ、キャッシュポリシー
dalan_123
Web

crontab問題
周凡楊
linux crontab unix

tomcatに2級ドメイン名共有セッションをサポートさせる
g21121
session

WebレポートツールFineReport常用関数の使い方まとめ(数学と三角関数)
Aさんは振り回さない
Web finereport まとめ

linux javaプロセスshファイルの起動
塀の上に草が1本ある
linux shell jar

私のspring学習ノート5-BeanFactoryをアプリケーションContextで置き換える方法
aijuans
Spring 3シリーズ

アルファベットで分類:
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その他
トップページ -
私たちについて -
構内検索 -
Sitemap -
権利侵害苦情
著作権すべてのIT知識ベースCopyRight© 2000-2050 IT知識ベースIT 610.com , All Rights Reserved.
京ICP備09083238号