stickUp 基于 jQuery 的固定元素 JS 插件 - 文章教程

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

发布于 2020-06-25 字数 5687 浏览 982 评论 0

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

特点

集成简单

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

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

单页导航

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

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

开源

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

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

佚名

文章 0 评论 0

文江

文章 0 评论 0

2012013325

文章 0 评论 0

女中豪杰

文章 2 评论 0