Все просто:
<div class="wrap"/>
<div id="block1" class="section"/>
<div id="block2" class="section"/>
<div id="block3" class="section"/>
<div id="block4" class="section"/>
<nav>
<a href="#block1" class="link active">Главная</a>
<a href="#block2" class="link">Услуги</a>
<a href="#block4" class="link">Часто задаваемые вопросы</a>
</nav>
$(function(){
$(window).scroll(function(){
var $sections = jQuery('.wrap .section');
$sections.each(function(i,el){
var top = jQuery(el).offset().top-100;
var bottom = top + jQuery(el).height();
var scroll = jQuery(window).scrollTop();
var id = jQuery(el).attr('id');
if( scroll > top && scroll < bottom){
jQuery('a.active').removeClass('active');
jQuery('a[href="#'+id+'"]').addClass('active');
}
})
});
$("nav").on("click","a.link", function (event) {
event.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
$('body,html').animate({scrollTop: top}, 800);
});
$(window).scroll(function(){
if(jQuery(this).scrollTop()>217){
jQuery('.body_center .left').addClass('fixed');
}
else if (jQuery(this).scrollTop()<217){
jQuery('.body_center .left').removeClass('fixed');
}
});
});
Скрипт праллакс скролинга, скрипт меню с активом и прилипашка.
