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

插件下载地址

stickUp：点击打开链接

jQuery.pin：点击打开链接

stickUp 的使用

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

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

使用方法

引入核心文件

1 2 3

< script  src = "http://libs.baidu.com/jquery/2.0.0/jquery.min.js" ></ script > //其它版本的jquery也可以，根据你项目的需求 < script  src = "jquery.nav.js" ></ script >

构建html标签

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

< ul  id = "nav" >      < li  class = "current" >< a  href = "#section-1" >Section 1</ a ></ li >      < li >< a  href = "#section-2" >Section 2</ a ></ li >      < li >< a  href = "#section-3" >Section 3</ a ></ li > </ ul >   < div  id = "section-1" >      < strong >Section 1</ strong >      < p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</ p > </ div >   < div  id = "section-2" >      < strong >Section 2</ strong >      < p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</ p > </ div >   < div  id = "section-3" >      < strong >Section 3</ strong >      < p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</ p > </ div >

写入JS，使用默认参数初始化

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$( '#nav' ).onePageNav({      currentClass:  'current' ,      changeHash:  false ,      scrollSpeed: 750,      scrollThreshold: 0.5,      filter:  '' ,      easing:  'swing' ,      begin:  function () {          //I get fired when the animation is starting      },      end:  function () {          //I get fired when the animation is ending      },      scrollChange:  function ($currentListItem) {          //I get fired when you enter a section and I pass the list item of the section      } });

如果你想当用户点击时改菜单选项的hash（哈希值），那么请把changeHash设置为true.

实现过滤跳转

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

1 2 3 4 5 6 7 8 9 10 11 12

< ul  id = "nav" >      < li  class = "current" >< a  href = "#section-1" >Section 1</ a ></ li >      < li >< a  href = "#section-2" >Section 2</ a ></ li >      < li >< a  href = "#section-3" >Section 3</ a ></ li >      < li >< a  href = "#section-4" >Section 4</ a ></ li >      < li >< a  href = "#section-5" >Section 5</ a ></ li >      < li >< a  href = "http://google.com"  class = "external" >Some other link</ a ></ li > </ ul >   $('#nav').onePageNav({      filter: ':not(.external)' });

如果在IOS设备上有问题

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

1 2 3 4 5 6 7 8 9

$( '#nav' ).onePageNav({      begin:  function () {          //Hack so you can click other menu items after the initial click          $( 'body' ).append( '<div id="device-dummy" style="height: 1px;"></div>' );      },      end:  function () {          $( '#device-dummy' ).remove();      } });

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： 点击打开链接