On page Scroll V 1.7

index.html

<div class="content">
<section class="header">
	<h1><u>🖥️ - ON PAGE SCROLL PLUGIN V 1.7 - 🖥️ </u></h1>
    <b><p>Now the height of each section can be set to your value and not <br>min-height: 'window.height()'</p></b>
    <p>This is the Header (.header)</p>
    <p>You can Enable/Disable it by setting the option like this:</p>
    <p><b>'header' : 'your jQ selector'</b></p>
</section>
<section class="section">
<div>
	<h1><u>This is the first Section (.section)</u></h1><br>
    <p>To make this Plugin work, you must:</p>

    <p>1. Set your section selector.. like this: <b>'page' : 'your jQ selector'</b></p>
  <p>2. And wrap your elements with a <b>&lt;div&gt;</b></p>

    <p>And you can also set the 'Page Name' for the sticky Menu, Like This:</p>
    <p><b>'pageName' : ['Section 1', 'The Other Section', '...']</b></p>
</div>
</section>
<section class="section">
<div>
	<h1><u>To enable the 'Sticky Menu'</u></h1><p>do it Like This:</p>
    <p><b>'sticky' : true</b></p>
    <p>By default it's set to 'false'</p>
    <p>You can use a <b><u>custom class</u></b> for the 'Sticky Menu' using this option:</p>
    <p><b>'stickyCls' : 'your className'</b><i> (not .class but class)</i></p>
</div>
</section>
<section class="section">
<div>
	<h1><u>The default easing is set to 'linear'..</u></h1>
    <p>But you can use the easing function you want.. Like This: (work with jQueryUI)</p>
    <p><b>'easing' : 'your easing function'</b></p>
</div>
</section>
<section class="section">
<div>
	<h1><u>You can set a threshold and an animation time</u></h1><p>Like This:</p>
    <p><b>'threshold' : 150 (or whatever you want)</b></p>
    <p><b>'time' : 1000 (or whatever you want)</b></p>
    <p>By default these options are set to 150 for the threshold and 1000 for the animation time.</p>
</div>
</section>

</div>

on-page-scroll-v-1-7.markdown

On page Scroll V 1.7

Just try it!!!

A Pen by Stan Williams on CodePen.

License.

script.js

$(document).ready(function() {

// START OF THE PLUGIN //
$.fn.page = function(options){	
	
	var default_o = {
		'threshold'	: 140,
		'time'		: 1010,
		'easing'		: 'linear',
		'page'		: null,
		'header'		: null,
		'before'		: null,
		'sticky'		: false,
		'stickyCls'	: null,
		'pageName'	: []
		};

	var o = $.extend(default_o, options);
	var elm = {};
	var stickyH;
	function __init(){
		$(o.page).first().addClass('actived');
		}
	
	function toNext(){
		var $this = $('.actived');
		var nxt = $this.next(o.page);
		if(nxt.length > 0){
			var offset = nxt.offset().top;
			if(o.sticky){ offset = offset-parseInt(stickyH,10); }

			if(typeof(o.before) === 'function'){o.before();}
		$('body, html').animate({scrollTop: offset},{
			start		: function(){ $this.removeClass('actived'); },
			easing		: o.easing,
			duration	: o.time,
			complete	: function(){ 
				nxt.addClass('actived');
				var color = $('.actived').prev(o.page).css('background');
				if((o.sticky) && (!o.stickyCls)){ 
					elm.wraper.animate({'background':color}, o.time);
					}
				},
		});
		}
		}
	function toPrev(){
		var color;
		var $this = $('.actived');
		var prv = $this.prev(o.page);
		if(prv.length > 0){
			var offset = prv.offset().top;
			if(o.sticky){ offset = offset-parseInt(stickyH,10); }

			if(typeof(o.before) === 'function'){o.before();}
		$('body, html').animate({scrollTop: offset},{
			start		: function(){ $this.removeClass('actived'); },
			easing		: o.easing,
			duration	: o.time,
			complete	: function(){
				 prv.addClass('actived'); 
				if($('.actived').prev(o.page).length > 0){
				color = $('.actived').prev(o.page).css('background');
				if((o.sticky) && (!o.stickyCls)){ 
					elm.wraper.animate({'background':color}, o.time);
					}
				}else{
				color = $(o.page).last().css('background');
				if((o.sticky) && (!o.stickyCls)){ 
					elm.wraper.animate({'background':color}, o.time/4); 
					}
				}
				 },
		});
		}
		}
		
	function header(){

		if(($(o.header).css('padding') === '0px')){ $(o.header).css({'padding': '1px'}); }
		$(o.header).attr('style','margin-top: 0px !important; margin-bottom :'+parseInt(stickyH,10)+'px !important;');
		
	}
	function sticky(){
		var newOff;
		var iniCol;
		if(!o.stickyCls){ iniCol = $(o.page).last().css('background'); }
		$('head').append('<style>.sliding-middle-out { display: inline-block; position: relative; padding-bottom: 3px; } .sliding-middle-out:after { content: ""; display: block; margin: auto; height: 3px; width: 0px; background: transparent; transition: width .5s ease, background-color .5s ease; } .sliding-middle-out:hover:after { width: 100%; background: #1A1A1A; } </style>');	

		
		elm.wraper = $('<ul></ul>');
		elm.wraper.css({
			'list-style'		: 'none',
			'padding' 		: '0',
			'margin'			: '0',
			'width' 			: '100%',
			'z-index'		: '2500',
			'background'		: iniCol,
			'box-sizing'		: 'border-box',
			'border-bottom' 	: '1px solid black',
			});
		
		var i = 0;
		
		$(o.page).each(function() {
		
		elm.list = $('<li></li>');
		elm.list = elm.list.css({
			'cursor'			: 'pointer',
			'list-style'		: 'none',
			'display'		: 'inline-block',
			'line-height'	: '20px',
			'padding'		: '15px',
			});
		elm.list = elm.list.addClass('sliding-middle-out');
		
		$(this).attr('id',o.pageName[i]);
		elm.list = elm.list.html('<a href="#'+o.pageName[i]+'">'+o.pageName[i]+'</a>');
		elm.wraper.append(elm.list);
		elm.wraper.find('a').css({'color':'inherit','text-decoration':'none'});

		i++;
		
		});
		if(o.stickyCls){ elm.wraper.addClass(o.stickyCls);}
		if((o.header !== null) && (o.header !== '')){
			elm.wraper.css({
					'position'	:'absolute',
					'top'		: $(o.header).outerHeight(),
				});

			$(o.header).after(elm.wraper);	
			newOff = 0;
		}else{
	
			$(o.page).parent().prepend(elm.wraper);
			elm.wraper.css({
					'position'	:'fixed',
					'top'		: '0px',
				});
			newOff = parseInt($(o.page).parent().offset().top,10)+parseInt(stickyH,10);
		}
		
					

		$(o.page).parent('div').offset({ top: newOff});
		}
	function stickyClick(e){
		var color;
		var thsId = $(e).index();
		var act = $('.actived');
		var target = $(o.page).eq(thsId);
		var targetOff = target.offset().top;
		if(o.sticky){ targetOff = targetOff-parseInt(stickyH,10); }
		
		$('body, html').animate({scrollTop: targetOff},{
			start		: function(){ act.removeClass('actived'); },
			easing		: o.easing,
			duration	: o.time,
			complete	: function(){ 
				target.addClass('actived');
				if($('.actived').prev(o.page).length > 0){
					color =  $('.actived').prev(o.page).css('backgroundColor');
					}
				else{ 
					color = $(o.page).last().css('backgroundColor');
					}
				if(!o.stickyCls){ 
					elm.wraper.animate({'backgroundColor':color}, o.time/4); 
					}
				},
		});
		
		}
	
	if(o.sticky){
		sticky();
		stickyH = elm.wraper.outerHeight();
		elm.wraper.children('li').on('click', function(){ stickyClick(this); });

	}

	header();
	__init();
		
	$(window).on('scroll', function(){
		
		var off;
		var hegt;
		var wndw = $(window).height();
		var amt = window.scrollY;

		if((o.header !== null) && (o.header !== '') && (o.header)){
			var headerHeight = $(o.header).outerHeight();
			if(amt > headerHeight){
				if(o.sticky){
					elm.wraper.css({
						'position'	: 'fixed',
						'top' 		: '0',
					});	
				}
			}
			else{
				if(o.sticky){
					elm.wraper.css({
						'position'	:'absolute',
						'top'		: $(o.header).outerHeight(),
					});
				}
			}
		}

		if($('.actived').length > 0){
			off = $('.actived').offset().top;
			hegt = $('.actived').outerHeight();
			if(o.sticky){hegt = hegt+parseInt(elm.wraper.height(),10);}
		}
		if(hegt < wndw){
			var nxtThreshold = (wndw-hegt)+parseInt(o.threshold,10);

			if((parseInt(amt,10)+parseInt(wndw,10)) > parseInt(off,10)+parseInt(hegt,10)+parseInt(nxtThreshold,10)){ toNext(o.page); }
			else if(amt < off-o.threshold-5){ toPrev(o.page); }
	
			}
		else{
		if((parseInt(amt,10)+parseInt(wndw,10)) > parseInt(off,10)+parseInt(hegt,10)+parseInt(o.threshold,10)){ toNext(o.page); }
		else if(amt < off-o.threshold-5){ toPrev(o.page); }
		}
	});
	
};
// END OF THE PLUGIN!!//


$(document).page({
		'page'		  : '.section',
		'header'		: '.header',
		'sticky'		: true,
		'stickyCls'	: 'nav',
		'pageName'	: ['Pages/Name', 'Sticky Menu', 'Easing', 'Threshold/Time']
		});
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

style.css

body{
	font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
	margin:0;
	}
.nav{
	background: rgb(55,55,55);
	color:white;
	height:100px;
	text-align:center;
	}
.header{
	background-color: #A93739;
	width:100% !important;
	margin-left:0 !important;
	text-align:center;
	padding: 100px;
	height: 500px;
	box-sizing:border-box;
	}

.section{
	width:80%;
	margin-left:10%;
	padding:1px;
	text-align:center;
	box-sizing:border-box;
	}
.section div{
	height: 60%;
	margin-top: 20%;
	}
.content{
    background: linear-gradient(#8b9da9, #fff6e4);
    box-shadow: inset 0 0 100px hsla(0,0%,0%,.3);
    min-height: 100%;
}