HTML, CSS, javascript, PHP

Плагин jquery.waypoints позволяет выполнять js-код когда html-блок достигнет нужного положения на странице.

Пример кода для плагина jquery.waypoints:

jQuery(document).ready(function(jQuery) {
	var nav_container = jQuery(".nav-container");
	var nav = jQuery('nav');
	var top_spacing = 0;
	var waypoint_offset = 50;
	jQuery('nav').waypoint(               
		{
			handler: function(direction) {
				
				/*  
				nav.toggleClass('sticky', direction=='down');
				*/
				if (direction == 'down'){
					nav_container.css({ 'height':nav.outerHeight() });
					nav.addClass("sticky")
						.stop()
						.css("top", -nav.outerHeight())
						.animate({"top" : top_spacing});
				}
				else{
					nav_container.css({ 'height':'auto' });
					nav.removeClass("sticky")
						.stop()
						.css("top", nav.outerHeight() + waypoint_offset)
						.animate({"top" : ""});

						//alert(direction);
				}
			}
			, offset: function() {return -(nav.outerHeight() + waypoint_offset);}

		}

	);

});

CSS:

.sticky {
	position: fixed;
	top: 0;
	right:0;
	left:0;
}

HTML:

<div class="nav-container">
	<nav class="navbar navbar-default navbar-static-top">
	</nav>
</div>

При прокрутке страницы вниз, блок навигации уходит вверх за пределы окна, а затем плавно возвращается к верхней части окна.