当前位置:主页 > 资源 > 效果代码 >

实用的jQuery网页元素固定导航置顶插件StickUp
栏目分类:效果代码   发布日期:2015-09-02   浏览次数:

实用的jQuery网页元素固定导航置顶插件StickUp,简单的jQuery插件,实现网页元素固定,如导航固定让其总是保持在视图中可见,在one-page页面中就可以看出效果,大家可以研究研究。使用方法:1 加载插件和jQuery
实用的jQuery网页元素固定导航置顶插件StickUp,简单的jQuery插件,实现网页元素固定,如导航固定让其总是保持在视图中可见,在one-page页面中就可以看出效果,大家可以研究研究。
实用的jQuery网页元素固定导航置顶插件StickUp

使用方法:

1.加载插件和jQuery

  1. <script src="js/jquery.js">script> 
  2. <script src="js/stickUp.min.js">script> 
  3. <link href="stickup.css" rel="stylesheet"> 
  4. <link href="css/bootstrap.min.css" rel="stylesheet"> 
  5. <script src="js/bootstrap.min.js">script> 

2.HTML内容(Bootstrap布局)

  1.  
  2.     <div class="navbar-wrapper"> 
  3.       <div class="container"> 
  4.       <div class="navwrapper"> 
  5.         <div class="navbar navbar-inverse navbar-static-top"> 
  6.           <div class="container"> 
  7.             <div class="navbar-header"> 
  8.               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
  9.                 <span class="icon-bar">span> 
  10.                 <span class="icon-bar">span> 
  11.                 <span class="icon-bar">span> 
  12.               button> 
  13.               <a class="navbar-brand" href="#">stickUpa> 
  14.             div> 
  15.             <div class="navbar-collapse collapse"> 
  16.               <ul class="nav navbar-nav"> 
  17.                 <li class="menuItem active"><a href="#home">Homea>li> 
  18.                 <li class="menuItem"><a href="#features">Featuresa>li> 
  19.                 <li class="menuItem"><a href="#updates">Updatesa>li> 
  20.                 <li class="menuItem"><a href="#installation">Installationa>li> 
  21.                 <li class="menuItem"><a href="#one-pager">One Pagera>li> 
  22.                 <li class="menuItem"><a href="#extras">Extrasa>li> 
  23.                 <li class="menuItem"><a href="#wordpress">Wordpressa>li> 
  24.                 <li class="menuItem"><a href="#contact">Contacta>li>     
  25.               ul> 
  26.             div> 
  27.           div> 
  28.         div>  
  29.       div> 

3.函数调用

  1. <script type="text/javascript"> 
  2.          //initiating jQuery   
  3.          jQuery(function($) { 
  4.             $(document).ready( function() { 
  5.                 //enabling stickUp on the '.navbar-wrapper' class 
  6.                $('.navbar-wrapper').stickUp({ 
  7.                                parts: { 
  8.                                  0:'home', 
  9.                                  1:'features', 
  10.                                  2: 'news', 
  11.                                  3: 'installation', 
  12.                                  4: 'one-pager', 
  13.                                  5: 'extras', 
  14.                                  6: 'wordpress', 
  15.                                  7: 'contact' 
  16.                                }, 
  17.                                itemClass: 'menuItem', 
  18.                                itemHover: 'active' 
  19.                              }); 
  20.                 }); 
  21.               }); 
  22. script> 
特效 教程 资源 资讯