这是一个轻量级的jQuery的单页网站导航插件。增加了单击后平滑滚动导航和当你浏览不同的部分时自动选择正确的导航项。

changeHash: false,  改变当用户单击导航,就改变changeHash选项为true。

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      } });

在项目中选择一个导航→传入一个选择器过滤选项。

选择到该导航,调用onePageNav();
$('#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单页网站导航插件One Page Nav的更多相关文章

  1. Fixed Responsive Nav – 响应式的单页网站导航插件

    Fixed Responsive Nav 是一个响应式的,固定的,触摸友好的单页网站导航插件,响应式导航,流畅的动画滚动.该项目采用渐进增强构建,支持工作在 IE6 及以上版本的浏览器. 你可以给导航 ...

  2. Smint – 用于单页网站制作的 jQuery 导航菜单插件

    Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...

  3. 拥抱单页网站! jQuery全屏滚动插件fullPage.js

    不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...

  4. FullPage.js – 轻松实现全屏滚动(单页网站)效果

    FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...

  5. 你应该知道的10个奇特的 HTML5 单页网站

    网页设计师努力寻找新的方式来展现内容.其中一个大的趋势是单页网站,现在被世界上的一些大的品牌广泛采用,使用它们来为用户提供一个快速,干净和简单的而且​​美丽的网站. 下面是10个令人惊叹的单页 H​​ ...

  6. 精品素材:WALK & RIDE 单页网站模板下载

    今天,很高兴能向大家分享一个响应式的,简约风格的 HTML5 单页网站模板.Walk & Ride 这款单页网站模板是现代风格的网页模板,简洁干净,像素完美,特别适合用于推广移动 APP 应用 ...

  7. HTML5网站大观:15个精美的 HTML5 单页网站作品欣赏

    HTML5 是现在Web开发领域的热点,更多的开发人员开始使用HTML5来开发交互性强.效果出众的Web应用和游戏.今天,本文收集了15个精美的 HTML5 单页网站作品,让大家感受一下 HTML5 ...

  8. AnjularJs的增删改查(单页网站)

    2016.6.4 学习文献: 你的第一个AngularJS应用:https://segmentfault.com/a/1190000000347412 AngularJS 提交表单的方式:http:/ ...

  9. SMINT:单页网站的免費jQuery插件

    最近为了做一个静态网页版的数据报告,不希望花很多时间去设计网页,或者花时间去调整布局,于是找到了一个名为Smint的免費jQuery插件.几乎不需要写什么代码就可以完成一个一页式网站.这非常适合用来制 ...

随机推荐

  1. 模板应用--UI线程与worker线程同步 模仿c# invoke

    由之前的一篇博文 <UI线程与worker线程><UI线程与worker线程>引出,UI线程与worker线程“串行化”在win32上实现是多么没有节操的事情,代码编写麻烦不说 ...

  2. .NET领域驱动设计—初尝(三:穿过迷雾走向光明)

    开篇介绍 在开始这篇富有某种奇妙感觉的文章之旅时我们先短暂的讨论一下关于软件开发方法论的简要: 纵观软件开发方法论,从瀑布模型.螺旋模型.RUP(统一软件开发过程).XP(极限编程).Agile(敏捷 ...

  3. Eclipse中更改默认java代码格式【转】

    在写代码时常常有2种代码样式习惯,如下图.由于一直习惯了第一种代码格式,而看第二种代码格式时感觉代码很乱,总找不到“{ }”对称的感觉.Eclipse自动格式化代码的快捷方式是Ctrl+Shift+F ...

  4. mesos博客集

    http://dongxicheng.org/category/apache-mesos/

  5. 浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异

    本文结合W3School的文档,分析了jQuery中 wrap() wrapAll() 与 wrapInner()的差异,并给出了图文对比教程,非常的简单实用,有需要的朋友可以参考下 今晚看书的时候发 ...

  6. Android博客

    各版本SDK Tools及ADT下载技巧:http://www.cnblogs.com/zhjsll/p/5147553.html 深入浅出SlidingMenu:http://www.cnblogs ...

  7. Oracle User Management FAQ翻译及学习笔记

    转载 最近了解到AME 的东西,很迫切,先转载一篇 [@more@] Oracle User Management FAQ翻译及学习笔记 写在前面 本文主要是翻译的英文版的Oracle User Ma ...

  8. beforefieldinit释义(2)

    首先来看一段代码: using System; namespace BeforeFieldInit { internal class Foo { Foo(){ Console.WriteLine(&q ...

  9. 图的广度优先/层次 遍历(BFS) c++ 队列实现

    在之前的博文中,介绍了图的深度优先遍历,并分别进行了递归和非递归实现.BFS 无法递归实现,最广泛的实现是利用队列(queue).这与DFS的栈实现是极其相似的,甚至代码几乎都很少需要改动.从给定的起 ...

  10. C++中内存分配详解

    转载自51CTO.com           http://developer.51cto.com/art/201107/276154.htm 我们都知道,内存基本上分为静态存储区.堆区和栈区三大部分 ...