Выделите пункт активного меню на странице Прокрутка Использование jQuery

Question

Я хочу выделить пункты меню, если прокручивается div. При прокрутке элемента активное состояние должно переключаться на текущее. Я добавил активную функцию класса, если вы нажмете на пункты меню.

Как это делается? Ребята дадут мне базу ответов на мое демо-кодирование? Благодарю.

Мой демо: http://codepen.io/anon/pen/yNbMwq

 var menuContainer = $('header').height(); 

function scrollToAnchor(anchorName) { 
    var aTag = $("div[name='" + anchorName + "']"); 
    $('html,body').animate({ 
    scrollTop: aTag.offset().top - menuContainer 
    }, 'slow'); 
    console.log(anchorName); 
} 
var sidenav = $('#submenu'); 
sidenav.delegate('.static', 'click', function(e) { 
    e.preventDefault(); 
    sidenav.find('.submenu-active').toggleClass('submenu-active'); 
    $(this).toggleClass('submenu-active'); 
    }) 
    .find('.static:first').addClass('submenu-active'); 

    /* header - navigation */ 

#subnav { 
    height: 100%; 
    margin-right: auto; 
    width: 100%; 
    background-color: #1BBC9B; 
    font-size: 120%; 
} 

#submenu ul { 
    padding: 0; 
    margin-top: 4px; 
    margin-right: auto; 
    margin-left: 0%; 
    margin-bottom: 0; 
    width: 650px; 
} 

#submenu li { 
    display: inline; 
    float: left; 
} 

#submenu li a { 
    padding: 10px 20px; 
    border-right: 1px solid #294C52; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

.submenu-active { 
    background-color: #294C52; 
    color: #FFFFFF; 
} 

a { 
    color: #294C52; 
} 

Answer 1

я сделал что-то подобное, как это, я отключил и включен классы CSS в зависимости от того, где я нажал. Пример кода ниже (довольно простой, но вы поняли идею)

$('.square_mark').click(function() { 
    if(!$(this).hasClass('active')) 
     $(this).addClass('active'); 
    else 
     $(this).removeClass('active'); 
    $('.polygon_mark').toggleClass("disabled"); 
}); 

$('.polygon_mark').click(function() { 
    if(!$(this).hasClass('active')) 
     $(this).addClass('active'); 
    else 
     $(this).removeClass('active'); 
    $('.square_mark').toggleClass("disabled"); 
});