这是一个简单的 jQuery 插件,它能让页面目标元素 “固定” 在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现在设定的位置。此插件可以在多页面的网站上工作,也能在单页面上面实现导航功能。
集成简单
stickUp 是一个 jQuery 插件,可以在任何页面与jQuery协同工作。有了stickUp,当用户向下拖动页面时,你仍然可以让任何页面元素、在任何页面,固定在浏览器窗口的顶部。这对于导航菜单、logo或联系信息等你希望用户一直看到的信息非常有帮助。
单页导航
虽然 stickUp 被设计为在任何类型的网站页面都能工作 ,但是其设计初衷是作为 单页导航。通过使用CSS可以控制导航菜单上的每个条目随着当前内容的改变而被高亮显示。
开源
LGPL 开源软件协议是由开源软件基金发布的。LGPL允许开发者和公司使用并集成LGPL软件到自己的软件中,不需要开放自己的私有代码部分。
安装指南
Made simple.
下载或从 GitHub 上面可控 stickUp 项目。解压到项目目录。请确保你已经正确引入了 jQuery。如果需要了解jQuery,请参考jQuery 是如何工作的。
现在就可以将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>
就这么简单!