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

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

 17694  77  查看评论 (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();
    }
});

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

类似fullPage的全屏滚动插件

这是一款类似fullPage的全屏滚动插件,使用很简单
  滚动
 12502  85

模拟电梯的返回顶部插件Elevator.js

Elevator.js通过在返回时添加音乐,使网页在返回顶部过程中犹如电梯向上运行,到达顶部后,有“到达”的提示音。
  滚动
 6700  42

jQuery电商网站楼层滚动定位

jQuery电商网站楼层滚动定位
  滚动
 14495  189

自定义滚动条

自定义滚动条,实现滚轮滚动内容
  滚动
 11705  78

讨论这个项目(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&bo 0
    2016/6/18 15:06:49
    萨满 0
    2016/5/10 9:05:04
取消回复
    PROMULGATOR

    魔界小鸟

    山东省济南市