stickUp

一个 jQuery 插件

这是一个简单的jQuery插件，它能让页面目标元素 “固定”
在浏览器窗口的顶部，即便页面在滚动，目标元素仍然能出现在设定的位置。此插件可以在多页面的网站上工作，也能在单页面上面实现导航功能。滚动当前页面看看导航条的效果吧。

首先我们去下载我们需要的js和css文件
https://github.com/LiranCohen/stickUp

经研究必要的js和css为

bootstrap.min.css

stickup.css

jquery.js

bootstrap.min.js

stickUp.min.js

请注意笔者引入的顺序哦.千万别弄错了.

写这个关键部分是导航部分:

关键代码如下(官方的样式):

<!--这里是导航-->

    <div class="navbar-wrapper">

        <div class="container">

            <div class="navbarwrapper" >

                <div class="navbar navbar-inverse navbar-static-top">

                    <div class="container">

                        <div class="navbar-collapse collapse">

                            <ul class="nav navbar-nav">

                                <li class="menuItem active">

                                    <a href="#home">首页</a>

                                </li>

                                <li><li class="menuItem">

                                    <a href="#yw">语文</a>

                                </li>

                                <li class="menuItem">

                                    <a href="#sx">数学</a>

                                </li>

                                <li class="menuItem">

                                    <a href="#wl">物理</a>

                                </li>

                                <li class="menuItem">

                                    <a href="#hx">化学</a>

                                </li>

                                <li class="menuItem">

                                    <a href="#sw">生物</a>

                                </li>

                                <li class="menuItem">

                                    <a href="#zz">政治</a>

                                </li>

                                <li class="menuItem">

                                    <a href="#dl">地理</a>

                                </li>

                                <li class="menuItem">

                                    <a href="#yy">英语</a>

                                </li>

                                <li class="menuItem">

                                    <a href="#more">更多</a>

                                </li>

                            </ul>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <!--end导航-->

效果如图:

实际效果比这张效果图要好,已上传不知道怎么就变样了.

特别要注意的是锚链接的文本一定要和导航部分的一致.

下面是最关键的部分了,就是实现导航悬浮顶部:需添加下面代码:

//记住是在引入js文件的后面写

<script type="text/javascript">

             jQuery(function($) {

        $(document).ready( function() {

          $(‘.navbar-wrapper‘).stickUp({

                        parts: {

                          0:‘home‘,  //这部分就是你锚链接的id

                          1:‘yw‘,

                          2: ‘sx‘,

                          3: ‘wl‘,

                          4: ‘hx‘,

                          5: ‘sw‘,

                          6: ‘zz‘,

                          7: ‘dl‘,

                          8: ‘yy‘,

                          9: ‘more‘
},

                        itemClass: ‘menuItem‘,

                        itemHover: ‘active‘,

                        topMargin: ‘auto‘

                      });

        });

      });

    </script>

这样就大功告成了!效果如图:

至此我们导航随滚动监听并保持悬浮顶部算是实现了

以下附上我的test源代码供大家参考:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<title>导航固定顶部</title>

},
itemClass: ‘menuItem‘,
itemHover: ‘active‘,
topMargin: ‘auto‘
});
});
});
</script>
</body>
</html>

Bootstrap导航悬浮顶部,stickUp,布布扣,bubuko.com

时间： 2024-10-15 05:54:16

Bootstrap导航悬浮顶部,stickUp

stickUp

一个 jQuery 插件

Bootstrap导航悬浮顶部,stickUp的相关文章

导航悬浮于顶部代码学习

Bootstrap导航条

神奇的Bootstrap 导航条全面实战篇

001-导航条悬浮顶部

Bootstrap导航栏实例讲解

bootstrap导航

bootstrap 导航元素

Bootstrap 导航标题栏

jQuery网页向下滚动导航固定顶部代码