jquery单页网站导航插件One Page Nav

所属分类:UI,导航-滚动,垂直导航

 17229  76  查看评论 (4)
jquery单页网站导航插件One Page Nav ie兼容6

样本的标记:

<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>


示例默认值:

$('#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
    }
});


如果你想要改变当用户单击导航,然后改变changeHash选项为true。

如果你想过滤项目从你的导航然后传入一个选择器过滤选项。

<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设备上单击链接导航导致其他链接断掉,你可以通过滚动操作来解决这个问题

$('#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();
    }
});

相关插件-滚动,垂直导航

jQuery无限滚动插件 Endless Scroll

Endless Scroll 是 jQuery 一个用来实现无限滚动的插件,相信你试过微软新搜索引擎 Bing 的搜索结果或者花瓣,当鼠标向下滚动时,新的内容会一直出现在下方,而不是翻页去浏览。
  滚动
 12535  66

jquery滚动效果插件ScrollMe

ScrollMe是一个页面添加简单的滚动效果的jQuery插件,当你向下滚动页面时,ScrollMe可以对页面元素进行轴标扫描、旋转、转换和改变不透明度,从而让整个页面动感起来。ScrollMe非常容易使用,它不需要写JS代码,只需在元素中写上属性就OK了。
  滚动
 3701  40

jQuery文字滚动显示

一个简单的jQuery文字滚动效果插件myslideup.js
  滚动
 6674  37

jquery鼠标滑轮改变数字大小

jquery通过滚动鼠标滑轮改变数字大小
  滚动
 5628  32

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币

    ★Badboy★0
    2016/12/21 23:12:02

    请问在一个高度固定的盒子内部实现这种效果吗?目前点击导航回到浏览器的顶部,我想实现点击之后相应的模块回到一个高度固定的盒子顶端而不是整个浏览器的顶部。菜鸟的js不精,见谅

    回复
    彼岸花1
    2016/8/30 15:08:11

    感谢分享,我看了下代码,我觉得bindInterval这个函数内可能有些问题,虽然说在调用这个函数之前调用了unbindInterval来清除这个计时器,不过在bindInterval这个函数体内,也就是这段:

    self.$win.on('scroll.onePageNav',
    function() {
        self.didScroll = true;
    });
    
    self.t = setInterval(function() {
        docHeight = self.$doc.height();
    
        //If it was scrolled
        if (self.didScroll) {
            self.didScroll = false;
            self.scrollChange();
        }
    
        //If the document height changes
        if (docHeight !== self.docHeight) {
            self.docHeight = docHeight;
            self.getPositions();
        }
    },
    250);

    并没有清除的代码,也就是说一旦进入这个计时器,就没办法终止了。个人觉得这个计时器没有必要,可以去掉。

    回复
    W&bo0
    2016/6/18 15:06:49
    萨满0
    2016/5/10 9:05:04
取消回复
    PROMULGATOR

    魔界小鸟

    火星