Как реализовать выделение активным пункт меню в зависимости от положения на странице?

Question

[Пащук Илья]

Вообщем есть меню которое состоит с якорей, хочу реализовать выделение активного пункта меню в зависимости от положения на странице!
Я вот написал такой скрипт отлично работает, но только как тогда когда былы сделаны переходы по пунктам меню, а если прокручивать скролом то не применяется параметре activе.

$(function () {                             
    $('.nav ul li a').each(function () {    
        var location = window.location.hash
        var link = this.href                
        var result = location.match(link);   
        if(result != null) {  $(this).addClass('active'); link=null;  }    
 });});

Вот попытка реализовать относительно положения скрола, пример взят с интернета, но что то не работает:

function scroll_active() {
        var window_top = $(window).scrollTop();
          var study = $('a[name="page-wrapper"]').offset().top -10;
        var nar  = $('a[name="narisuem"]').offset().top -10;
        var desing = $('a[name="ourteam"]').offset().top -10;
        var work = $('a[name="ourworks"]').offset().top -10;
        var contacts = $('a[name="ourcontact"]').offset().top -  $(window).height() + 180;
            if (window_top > contacts) {
                $(".nav li").removeClass("active");
                $('a[href="#ourContact"]').parent().addClass("active");
                }
        else if (window_top > work) {
                $(".nav li").removeClass("active");
                $('a[href="#ourWorks"]').parent().addClass("active");
                }
        else if (window_top > desing) {
                $(".nav li").removeClass("active");
                $('a[href="#ourteam"]').parent().addClass("active");
                }
        else if (window_top > nar) {
                $(".nav li").removeClass("active");
                $('a[href="#narisuem"]').parent().addClass("active");
                }
        else {
                $(".nav li").removeClass("active");
                $('a[href="#page-wrapper"]').parent().addClass("active");
                }
}
jQuery(function()
        { jQuery(window).scroll(scroll_active); });

вот

<ul>
 <li><a name="page-wrapper" href="/#page-wrapper" onclick="return anchorScroller(this)">студия</a></li>		
 <li><a name="narisuem" href="/#narisuem" onclick="return anchorScroller(this)">Услуги</a></li>		
 <li><a name="ourteam" href="/#ourteam" onclick="return anchorScroller(this)">Дизайнеры</a></li>		
 <li><a name="ourworks" href="/#ourWorks" onclick="return anchorScroller(this)">Работы</a></li>		
 <li><a name="ourcontact" href="/#ourContact" onclick="return anchorScroller(this)">Контакты</a></li>		
 <li><a href="/blog/" onclick="return anchorScroller(this)">Блог</a></li>		
</ul>

буду рад получить совет в направлении где копать, за ранее спасибо!

Answer 1

[svarnoi420]

Вот, можно ссылаться на этот плагин:
masscode.ru/index.php/k2/item/54-lilanding
Но только ссылаться

Comments

[Пащук Илья]

интересный вариант, спасибо!

Answer 2

[Сергей С]

вот похожий пример jsfiddle.net/cse_tushar/Dxtyu/141

Comments

[Пащук Илья]

сенкс буду копать)

Answer 3

[Пащук Илья]

Может кому пригодится то я реализовал даную задачу так:

/*  */
$(window).on("scroll", function() { 
      	var scro= $(window).scrollTop();            
        var scr=0; 		// начало страницы меню студия
        var scr2=849; 	// начало меню услуги
        var scr3=1711;	// начало меню дизайнеры
        var scr4=2578;	// начало меню работы
        var scr5=4073;	// начало меню контакты
/*      положение  скрола относительно пункта Студия    */
    if ( $(window).scrollTop() >= scr && scro <= scr2 ) {	$('#m1').addClass('active');}
     else $('#m1').removeClass('active');
/*      положение  скрола относительно пункта Услуги   */
	if ( scro > scr2 && scro <= scr3 ) { 	$('#m2').addClass('active');}
     else $('#m2').removeClass('active');
/*      положение  скрола относительно пункта Дизайнеры   */
    if ( scro > scr3 && scro <= scr4 ) {   	$('#m3').addClass('active');}
     else $('#m3').removeClass('active');

/*      положение  скрола относительно пункта Портфолио  */
	if ( scro > scr4 && scro <= scr5 ) {   	$('#m4').addClass('active');}
     else $('#m4').removeClass('active');

/*      положение  скрола относительно пункта Контакты  */
	if ( scro > scr5 ) {  	$('#m5').addClass('active');}
     else $('#m5').removeClass('active');
    });
</script>

Соответственно для определения точного положения скрола при переходе на якорь, для это просто в консоли выполните window.pageYOffset.
Конечно много чего в скрипте можно было сделать проще и лучше правельней так сказать, но я добавил плавность переходов, поставленную задачу решил, заказчик доволен, это главное!