stickUp 基于 jQuery 的固定元素 JS 插件

Question

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

特点

集成简单

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

单页导航

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

开源

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

安装指南

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

Visit GitHub

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

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

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

//initiating jQuery
jQuery(function($) {
  $(document).ready( function() {
    //enabling stickUp on the '.navbar-wrapper' class
    $('.navbar-wrapper').stickUp();
  });
});

就这么简单！

“单页”导航

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

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

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

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

//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'
    });
  });
});

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

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

额外参数

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

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

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

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

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

//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'
    });
  });
});

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

Wordpress

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

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

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

Visit GitHub

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

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

<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/stickUp.min.js"></script>

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

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

//initiating jQuery
jQuery(function($) {
  $(document).ready( function() {
    //目标元素ID -- '#navbar' 
    $('#navbar').stickUp();
  });
});

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

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

https://github.com/LiranCohen/stickUp