Sticky Navigation and Scrolling

markup.html

<!-- http://anythinggraphic.net/sticky-navigation-and-animated-scrolling/ -->

<div class="sticky">
	<ul class="sticky-navigation">
		<a href="#section_1">Your Title or Text Here</a>
		<a href="#section_2">Your Title or Text Here</a>
		<a href="#section_3">Your Title or Text Here</a>
	</ul>
</div>

<div id="section_1">
	<p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
</div>

<div id="section_2">
	<p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>
</div>

<div id="section_3">
	<p>Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.</p>
</div>

scrolling-navigation-links.js

// http://anythinggraphic.net/sticky-navigation-and-animated-scrolling/

$(document).ready(function(){
	$('.sticky-navigation a').click(function(){
		var el = $(this).attr('href');
		var elWrapped = $(el);
		
		scrollToDiv(elWrapped,40);
		return false;
	});
		
	function scrollToDiv(element,navheight){
		var offset = element.offset();
		var offsetTop = offset.top;
		var totalScroll = offsetTop-navheight;
		
		$('body,html').animate({
		scrollTop: totalScroll
		}, 500);
	}
});

sticky-navigation.js

// http://anythinggraphic.net/sticky-navigation-and-animated-scrolling/

$(function(){ // document ready
	var stickyTop = $('.sticky').offset().top; // returns number

	$(window).scroll(function(){ // scroll event
		var windowTop = $(window).scrollTop(); // returns number

		if (stickyTop < windowTop) {
			$('.sticky').css({ position: 'fixed', top: 0 });
		} else {
			$('.sticky').css('position','static');
		}
	
	});
});