插件 jQuery.one page nav 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.one page nav 中文API文档 https://github.com/davist11/jquery-One-Page-Nav A lightweight jQuery plugin for the navigation on one-page sites. Adds smooth scrolling when clicking on the navigation and automatically selects the correct navigation items as you are scrolling through the different sections.

The plugin still works even if you add additional content to the page after the fact that changes the position of each section.

Sample Markup:

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

Example Usage with Defaults:

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

If you want the hash to change when a user clicks on the navigation, then change the changeHash options to true.

If you want to filter items out of your navigation then pass in a selector to the filter option.

Filter Example:

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

Offset

In a previous version, there was an offset option to pass into the JavaScript. This was abandoned in favor of a CSS-only solution which simplified the code and makes it easier to handle responsively. Example

If you are having issues with iOS devices

If clicking a link in the nav makes the rest of the links unclickable until you scroll, you can solve it in this hacky way:

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

Found the solution here

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了