Изменение выделенных кнопок навигации на странице прокрутки (не работает)

Question

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

Я просмотрел и попытался реализовать несколько решений там (здесь кучи), но мне не повезло.

мой код JS здесь:

// Cache selectors 
var lastId, 
    topMenu = $("#primary-menu"), 
    topMenuHeight = topMenu.outerHeight()+30, 
    // All list items 
    menuItems = topMenu.find("a"), 
    // Anchors corresponding to menu items 
    scrollItems = 300 + menuItems.map(function(){ 
     var item = $($(this).attr("href")); 
     if (item.length) { return item; } 
    }) ; 


// Bind to scroll 
$(window).scroll(function(){ 
    // Get container scroll position 
    var fromTop = $(this).scrollTop()+topMenuHeight; 

    // Get id of current scroll item 
    var cur = scrollItems.map(function(){ 
    if ($(this).offset().top < fromTop) 
     return this; 
    }); 
    // Get the id of the current element 
    cur = cur[cur.length-1]; 
    var id = cur && cur.length ? cur[0].id : ""; 

    if (lastId !== id) { 
     lastId = id; 
     // Set/remove active class 
     menuItems 
     .parent().removeClass("active") 
     .end().filter("[href=#"+id+"]").parent().addClass("active"); 
    }     
});  

код из header.php - заявляет NavBar

<div id="navbar" class="navbar"> 
      <nav id="site-navigation" class="navigation main-navigation" role="navigation"> 
       <button class="menu-toggle"><?php _e('Menu', 'twentythirteen'); ?></button> 
       <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e('Skip to content', 'twentythirteen'); ?>"><?php _e('Skip to content', 'twentythirteen'); ?></a> 
       <?php wp_nav_menu(array('theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu')); ?> 
       <?php get_search_form(); ?> 
      </nav><!-- #site-navigation --> 
     </div><!-- #navbar --> 

код со страницы-home.php - пример раздела:

<div class="section6" id="connect"> 
<div class = "heading1">connect</div> 
<div class="contactform"> 
<?php if(function_exists('ninja_forms_display_form')){ ninja_forms_display_form(6); } ?> 
</div> 
</div> 

И соответствующий код css:

.main-navigation { 
text-align:right; 
clear: both; 
margin: 0 auto; 
max-width: 1080px; 
min-height: 75px; 
position: relative; 
    background-image:url("images/logo-white.png"); 
background-size:70px auto; 
background-repeat:no-repeat; 
background-position:10px 15px; 
} 

ul.nav-menu, 
div.nav-menu > ul { 
line-height: 75px; 
margin: 0; 
padding: 0 40px 0 0; 
} 

.nav-menu li { 
display: inline-block; 
position: relative; 

} 

.nav-menu li a { 
color: #737373; 
display: block; 
font-size: 10px; 
line-height: 1; 
padding: 15px 20px; 
text-decoration: none; 
text-transform:uppercase; 
letter-spacing:3px; 
outline:none; 

} 


.nav-menu li.active, 
.nav-menu li.active > a { 
color: #FCFBD9; 

} 

.navmenu li a .active { 
color: #FCFBD9; 
} 

.nav-menu li:hover > a, 
.nav-menu li a:hover, 
.nav-menu li:focus > a, 
.nav-menu li a:focus { 
color: #FCFBD9; 
} 

Этот скрипт с сайта друга, который отлично работает. Я не понимаю, почему это ничего не сделает для моего, так как наши соглашения об именах идентичны.

Возможно, это может быть проблема css?

сайт www.enitrecreative.com/stone

Спасибо за любую помощь/предложения/советы!

Answer 1

Легко, что вам нужно сделать, это использовать scrollspy, поэтому в навигаторе, где вы указываете свой href, вы должны использовать say #about, тогда вы просто называете свой раздел примерно так, и он должен работать.