陈斌彬的技术博客

Stay foolish,stay hungry

jQuery-sitckUp

img

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

集成简单

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

单页导航

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

开源

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

安装指南

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>

就这么简单!