让页面目标元素 “固定” 在浏览器窗口的顶部 stickUp+jQuery.pin 插件 使用 单页导航

插件下载地址

stickUp：点击打开链接

jQuery.pin：点击打开链接

stickUp 的使用

One Page Nav一个轻量级的jQuery的网站单页平滑滚动导航插件，One
Page Nav可实点击对应的菜单项网页平滑的滚动到对应的内容区域，滚动鼠标滚轮，随着页面的滚动，菜单选项会跟随所显示的区域自动被选中。

One Page Nav单页菜单插件在页面各菜单项的内容区域外添加额外的内容块仍然可以正常的工作，不受新增内容影响。

使用方法

引入核心文件
构建html标签
写入JS，使用默认参数初始化
如果你想当用户点击时改菜单选项的hash（哈希值），那么请把changeHash设置为true.

实现过滤跳转

如果你想跳过某个菜单选项或是让这个菜单选项直接链接到其它地址，那么只需把这个菜单项的选择器传给写filter参数选项即可。
如果在IOS设备上有问题

如果你单击菜单选项上的链接而导致其它链接失效，直到滚动才恢复，那么你可以用以下这方式来解决。
css样式参考

ul {
margin-left: 1em;
}

#nav {
left: -30px;
list-style: none;
margin: 0;
position: fixed;
}

#nav li {
margin-bottom: 2px;
}

#nav a {
background: #ededed;
color: #666;
display: block;
font-size: 14px;
padding: 5px 10px;
text-decoration: none;
text-transform: uppercase;
}

#nav a:hover {
background: #dedede;
}

#nav .current a {
background: #666;
color: #ededed;
}

demo：点击打开链接

JQuery.pin.js 的使用

“钉”住某个元素

$(".pinned").pin()

将某元素“钉”在容器内

$(".pinned").pin({
containerSelector: ".container"
})

在小尺寸的屏幕上禁用Pin效果

$(".pinned").pin({
minWidth: 940
})

demo：点击打开链接