这是一个轻量级的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. 【二叉树->链表】二叉树结构转双向线性链表结构(先序遍历)

    二叉树存储结构属于非线性链表结构,转化成线性链表结构,能简化操作和理解.然而由非线性转线性需要对整个树遍历一次,不同的遍历方式转化结果页不一样.下面以先序为例. 方法一: 递归法.递归遍历二叉树,因为 ...

  2. PDF转word文档

    本文未对扫描版的PDF实验,但是可编辑PDF版本可以转换为word而且转换后的word是可编辑的. 1.从http://xiazai.zol.com.cn/detail/33/326858.shtml ...

  3. eclipse/myeclipse使用技巧

    热键篇: Template:Alt + / 修改处:Window->Preference->Workbench->Keys->Command->Edit->Cont ...

  4. Java面试题之八

    四十一.面向对象的特征有哪些方面 四大特征大家都知道:抽象.继承.封装.多态.这是个理解性表述题,每个人的表述方式可能都不一样.下面仅选择一种作为参考: 1.抽象: 抽象——就是忽略一个主题中与当前目 ...

  5. Linux基本配置和管理 4 ---- Linux系统启动详解

    1 系统启动的流程 BIOS -> MBR+boot code -> 执行引导程序: GRUB -> 加载内核 -> 执行init -> 运行runlevel 2 启动详 ...

  6. IOS 开展 分别制定了iphone 和 ipad 好? 或开发一个 Universal好?

    最近因为工作的需要,.因为时间短的开发周期 开发的需要 积 至iphone 和 ipad 台 执行 优势的版本号 1.安装包,轻松管理,分布 2.您下载iphone,ipad 会自己主动下载 3.审核 ...

  7. 好用的侧边栏菜单/面板jQuery插件

    我想大家都用过一些APP应用,它们的菜单展示是以侧边栏滑动方式展现,感觉很新鲜,而现在网页设计也是如此,不少网站也效仿这样的方式来设计.使用侧边栏的好处就是可以节约空间,对于一些内容多或者喜欢简约的网 ...

  8. jvm莫名退出问题解决

    当jvm莫名退出,没有留下任何任何信息的时候,在centos的 /var/log/dmesg文件中,或许可以找到一些端倪

  9. css float笔记

    float 1.破坏性,让设置了float属性的元素脱离文档流 2.包裹性:div设置了float之后,其宽度会自动调整为包裹住内容宽度,而不是撑满整个父容器.如果没有包裹性,如何实现文字环绕(flo ...

  10. (原) Jquery 判断移动设备是IOS / Android系统

    var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > - ...