stickUp
一个 jQuery 插件
这是一个简单的jQuery插件，它能让页面目标元素 “固定” 在浏览器窗口的顶部，即便页面在滚动，目标元素仍然能出现在设定的位置。此插件可以在多页面的网站上工作，也能在单页面上面实现导航功能。滚动当前页面看看导航条的效果吧。
by Liran Cohen
v0.5.7 BETA
集成简单
stickUp 是一个 jQuery 插件，可以在任何页面与jQuery协同工作。有了stickUp，当用户向下拖动页面时，你仍然可以让任何页面元素、在任何页面，固定在浏览器窗口的顶部。这对于导航菜单、logo或联系信息等你希望用户一直看到的信息非常有帮助。
更新记录
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 是如何工作的。
现在就可以将stickUp所包含的的javascript文件加载到你的页面中了。拷贝下面的代码，粘贴到页面底部。务必确保javascript文件的路径正确无误。
接下来，将下面的代码拷贝粘贴到页面底部，并且放到前面引入的stickUp文件下面。或者，你也可以将下面的代码放倒已经存在的javascript文件中（这个文件也必须在stickUp文件下面）。将 '.navbar-wrapper' 替换为目标元素的class名称。
就这么简单！
“单页”导航
自己试试吧
如果你的页面布局为单页面导航，并希望导航条一直固定在顶部，让用户随时知道自己所处的位置，只需按照下面的步骤照着做就能实现。
第一步， 收集页面上所有将要作为锚点的元素。
如果这些元素还没有被赋予 "id=" 属性，请为其设置好。
接下来， 修改 stickUp 插件的引用代码如下：
**上面的数字标注的是元素出现的顺序。
itemClass: 是每个导航菜单条目所对应的的class。
itemHover: 是当菜单条目处于激活状态时所被赋予的class，用于修改其外观。
额外参数
附加配置信息
我正在继续完善这个插件。如果有建议或需求，请告诉我。
stickUp自己使用到了两个class，需要注意一下。
.stuckMenu: 初始化插件时，这个class被添加到目标元素。
.isStuck: 当stickUp对目标元素起作用时，此class将被添加到目标元素。反之则被移除。
目前stickUp仅提供了下面这一个而外参数，将来会加入更多。
marginTop:
此参数将为目标元素设置上边距。可选值为 'auto'，这时，将会自动获取目标元素的上边距并应用到目标元素上；还可以设置为具体的高度。下面就是本页面导航条所用的代码。
其工作过程为，stickUp插件自动获取 '.navbar-wrapper' 的上边距值，并在滚动过程中赋予目标元素。
Wordpress.
Adding functionality.
将 stickUp 集成到 Wordpress 也是很简单的。另外，我还在为Wordpress开发一个单独版本的stickUp插件，它能更容易的集成到后台并包含更多热性。
其实和任何页面集成stickUp类似，下面我们再详细说一下。
首先，必须下载stickUp文件'stickUp.min.js'并将其放到当前主题目录的'js'目录下。如果不存在，请自行创建。stickUp文件可以从GitHub上面获取。
接下来，将stickUp文件集成到Wordpress中。在当前主题目录下，找到并打开包含页脚的文件，一般是'footer.php' 文件，或者起同样作用的文件，这就要看你当前所用的主题是如何命名的。
在此文件底部找到 '</body>' 标签，在 '<?php wp_footer(); ?>' 标签下面插入如下代码：
最后， 加入以下javascript代码。我们以Wordpress默认主题 'Twenty Thirteen' 为例。
在上一步我们所加入的代码后面加入下面的代码片段：
完成！ That element is now a sticky element. 你还可以在Wordpress上探索此插件的其它特性，请认真阅读 One Pager 和 Extras 段落。
**尤其注意'marginTop' 属性，这个属性用来给 Wordpress 工具条添加上边距，如果没有设置正确，可能会引起冲突。