推扬网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
推扬网 门户 经验分享 查看内容

jQuery插件StickUp实现网页导航置顶

2020-4-11 13:37| 发布者: admin| 查看: 406| 评论: 0

本文给大家介绍的是一款jQuery插件--StickUp,他的主要用途是实现网页元素固定,如导航固定让其总是保持在视图中可见,效果非常不错,这里推荐给小伙伴们。

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

使用方法:

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内容(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.函数调用

<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> 

查看DEMO   立即下载

以上所述就是本文的全部内容了,希望对大家熟练使用jQuery能够有所帮助。


鲜花

握手

雷人

路过

鸡蛋

最新评论

精选推荐

    广告服务|投稿要求|禁言标准|版权说明|免责声明|手机版|小黑屋|推扬网 ( 粤ICP备18134897号 )|网站地图 | 邮箱:vayae@hotmail.com

    GMT+8, 2024-3-29 05:13 , Processed in 0.341367 second(s), 28 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    返回顶部