顶部
stickUp

by Liran Cohen

v0.5.7 BETA

集成简单

stickUp 是一个 jQuery 插件，可以在任何页面与jQuery协同工作。有了stickUp，当用户向下拖动页面时，你仍然可以让任何页面元素、在任何页面，固定在浏览器窗口的顶部。这对于导航菜单、logo或联系信息等你希望用户一直看到的信息非常有帮助。

详细内容 »

单页导航

虽然 stickUp 被设计为在任何类型的网站页面都能工作 ，但是其设计初衷是作为 单页导航。通过使用CSS可以控制导航菜单上的每个条目随着当前内容的改变而被高亮显示。

详细信息 »

开源

LGPL开源软件协议是由开源软件基金发布的。LGPL允许开发者和公司使用并集成LGPL软件到自己的软件中，不需要开放自己的私有代码部分。

详细信息 »

更新记录

Beta 版发布！ Nov 1st, 2013

The first version of the stickUp jQuery plugin has oficially been launched. This is still in Beta and there may be a few bugs, but they are will get sorted out in the coming weeks. Pleaes contact me if you experience any troubles. Check back often for updates on new features.

"One Pager" anchor functionality. Oct 31st, 2013

Decided to add anchor functionality so that as certain sections of a 'One Pager' style website, like this one, could trigger a CSS change as they're scrolled into view. That way your users know where they are while they're scrolling through content. More options are coming for this in the future.

In need of Margin... Oct 30th, 2013

When I initially made the plugin the goal was to make the element stick to the very top, but after deciding to make an official example page for it I realizd that I loved the look of a floating plugin. So I added a little feature called marginTop to the mix. This allows the element to be caught by it's margin rather than when it hits the top of the page.

stickUp is Alive! Oct 29th, 2013

I've decided to create a plugin out of necessity. There are plenty of "sticky nav" jQuery plugins available out there, but none of them seem to work as smoothly as I'd like. I decided to create my own and out of that stickUp was born! It's not perfect and has it's kinks, but they will be worked out over the coming weeks.

安装指南
Made simple.

下载或从GitHub上面可控stickUp项目。解压到项目目录。请确保你已经正确引入了jQuery。如果需要了解jQuery，请参考jQuery 是如何工作的。

Visit GitHub

现在就可以将stickUp所包含的的javascript文件加载到你的页面中了。拷贝下面的代码，粘贴到页面底部。务必确保javascript文件的路径正确无误。

<script src="js/stickUp.min.js"></script>

接下来，将下面的代码拷贝粘贴到页面底部，并且放到前面引入的stickUp文件下面。或者，你也可以将下面的代码放倒已经存在的javascript文件中（这个文件也必须在stickUp文件下面）。将 '.navbar-wrapper' 替换为目标元素的class名称。

<script type="text/javascript"> //initiating jQuery jQuery(function($) { $(document).ready( function() { //enabling stickUp on the '.navbar-wrapper' class $('.navbar-wrapper').stickUp(); }); }); </script>

就这么简单！

“单页”导航
自己试试吧

如果你的页面布局为单页面导航，并希望导航条一直固定在顶部，让用户随时知道自己所处的位置，只需按照下面的步骤照着做就能实现。

第一步， 收集页面上所有将要作为锚点的元素。

如果这些元素还没有被赋予 "id=" 属性，请为其设置好。

接下来， 修改 stickUp 插件的引用代码如下：

<script type="text/javascript"> //initiating jQuery jQuery(function($) { $(document).ready( function() { //为 '.navbar-wrapper' class 启用stickUp插件 $('.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>

**上面的数字标注的是元素出现的顺序。

itemClass: 是每个导航菜单条目所对应的的class。
itemHover: 是当菜单条目处于激活状态时所被赋予的class，用于修改其外观。

额外参数
附加配置信息

我正在继续完善这个插件。如果有建议或需求，请告诉我。

stickUp自己使用到了两个class，需要注意一下。

.stuckMenu: 初始化插件时，这个class被添加到目标元素。
.isStuck: 当stickUp对目标元素起作用时，此class将被添加到目标元素。反之则被移除。

目前stickUp仅提供了下面这一个而外参数，将来会加入更多。

marginTop: 此参数将为目标元素设置上边距。可选值为 'auto'，这时，将会自动获取目标元素的上边距并应用到目标元素上；还可以设置为具体的高度。下面就是本页面导航条所用的代码。

<script type="text/javascript"> //initializing jQuery jQuery(function($) { $(document).ready( function() { //enabling stickUp on the '.navbar-wrapper' class $('.navbar-wrapper').stickUp({ //enabling marginTop with the 'auto' setting marginTop: 'auto' }); }); }); </script>

其工作过程为，stickUp插件自动获取 '.navbar-wrapper' 的上边距值，并在滚动过程中赋予目标元素。

Wordpress.
Adding functionality.

将 stickUp 集成到 Wordpress 也是很简单的。另外，我还在为Wordpress开发一个单独版本的stickUp插件，它能更容易的集成到后台并包含更多热性。

其实和任何页面集成stickUp类似，下面我们再详细说一下。

首先，必须下载stickUp文件'stickUp.min.js'并将其放到当前主题目录的'js'目录下。如果不存在，请自行创建。stickUp文件可以从GitHub上面获取。

Visit GitHub

接下来，将stickUp文件集成到Wordpress中。在当前主题目录下，找到并打开包含页脚的文件，一般是'footer.php' 文件，或者起同样作用的文件，这就要看你当前所用的主题是如何命名的。

在此文件底部找到 '</body>' 标签，在 '<?php wp_footer(); ?>' 标签下面插入如下代码：

最后， 加入以下javascript代码。我们以Wordpress默认主题 'Twenty Thirteen' 为例。

在上一步我们所加入的代码后面加入下面的代码片段：

<script type="text/javascript"> //initiating jQuery jQuery(function($) { $(document).ready( function() { //目标元素ID -- '#navbar' $('#navbar').stickUp(); }); }); </script>

完成！ That element is now a sticky element. 你还可以在Wordpress上探索此插件的其它特性，请认真阅读 One Pager 和 Extras 段落。

**尤其注意'marginTop' 属性，这个属性用来给 Wordpress 工具条添加上边距，如果没有设置正确，可能会引起冲突。