One Page Sticky: jQuery plugin to perform vertical sticky animation

Recommend this page to a friend!

Download

Info

Example

Files

Download

Reputation

Support forum

Blog

Links

Last Updated		Ratings				Unique User Downloads		Download Rankings
2025-07-09 (3 hours ago)		Not enough user ratings				Total: 69		All time: 474 This week: 5

Version		License		JavaScript version		Categories
`onepagesticky` 1.0.2		MIT/X Consortium ...		5		Animation, Flash

Description

Author

Emmanuel Podvin

This package is a jQuery plugin to perform vertical sticky animation.

It can scroll pages vertically to positions of specific section areas.

Innovation Award

September 2017
Winner

This object can create, open and close popup page elements.

It can take the identifier of a given page element and make it visible as a popup.

The object can also configure several aspects of the popup like the opacity, positioning, background color, etc..

Manuel Lemos

Emmanuel Podvin

Performance

Level

Name:	Emmanuel Podvin `<contact>`
Classes:	5 packages by Emmanuel Podvin
Country:	France
Age:	60
All time rank:	63	4 in France
Week rank:	6	2 in France

Level 1

Innovation award

Nominee: 5x

Winner: 4x

Example

<!doctype html>
<html>
	<head>
		<style>
			body{padding:0px;margin:0px;}
			#menu {
				z-index:100;position: fixed;top:10px;
			}
			#wrap-site-content {margin-top:50px;width:100%;}
			#wrap-site-content article {width:100%;min-height:400px;position:relative;}
			.ajax-loader {
				background-image: url("img/ajax-loader.gif");
				background-repeat: no-repeat;
				background-position: center 33%;
				background-color: rgba(240, 240, 240, .84);
				position: fixed;
				z-index: 9999;
				display:none;
				}
			
		</style>
		<!-- 
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script src="http://www.intersel.fr/assets/gitdemos/iFSM/extlib/jquery.attrchange.js"></script>
		<script src="http://www.intersel.fr/assets/gitdemos/iFSM/extlib/jquery.dotimeout.js"></script>
		<script src="http://www.intersel.fr/assets/gitdemos/iFSM/iFSM.js"></script>
		-->
		<script src="../ifsm/extlib/jquery-2.1.1.min.js"></script>
		<script src="../ifsm/extlib/jquery.attrchange.js"></script>
		<script src="../ifsm/extlib/jquery.dotimeout.js"></script>
		<script src="../ifsm/iFSM.js"></script>

		<script src="jquery.stickyplus.js"></script>
		<script src="jquery.mousewheel.js"></script>
		<script src="onepage-display.js"></script>
	</head>
	<body>
		<div id="menu" style="">
			<button data-pageid="1">Goto Page 1</button>
			<button data-pageid="2">Goto Page 2</button>
			<button data-pageid="3">Goto Page 3</button>
		</div>
		<div id="wrap-site-content">
			<section class="onePage" data-onepage="enabled">
				<article data-pageid="pageid_1" style="background-color:green;">
					<h1>Page 1</h1>
					contenu page 1
				</article>
				<article data-pageid="pageid_2" style="background-color:blue;">
					<h1>Page 2</h1>
					contenu page 2
				</article>
				<article data-pageid="pageid_3"  style="background-color:grey;">
					<h1>Page 3</h1>
					contenu page 3
				</article>
			</section>
		</div>
		<script>
$(document).ready(function() {		
	var aOnePageToDisplay =  new OnePageDisplay();
	aOnePageToDisplay.init();
	$(document).trigger('ajax-success-call');
	
	$("button").click(function(){
		$(aOnePageToDisplay.opts.GeneralContainer).trigger("OP_PageToGo",$(this).attr("data-pageid"));		
	});
});
		</script>
	</body>
</html>

Details

onePageSticky

vertical one page animation with stiky effect

UNDER CONSTRUCTION / NOT YET READY

Files (5)

File	Role	Description
`jquery.mousewheel.js`	Class	Class source
`jquery.stickyplus.js`	Class	Class source
`onepage-display.js`	Class	Class source
`README.md`	Doc.	Documentation
`testsample.html`	Example	Example