Изменить элемент активного меню на странице прокрутки?

Question

Я хочу активировать пункт меню, когда я доберусь до соответствующего раздела. Меня вдохновил этот предыдущий вопрос SO: Change Active Menu Item on Page Scroll?.

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

HTML

<nav> 
     <ul id="pics"> 
      <a href="#def"><li id="text-what"><img src="images/what.png" id="pic-what" class="vishid"><p>item1</p></li></a> 
      <a href="#program"><li id="text-training"><img src="images/training.png" id="pic-training" class="vishid"><p>item2</p></li></a> 
      <a href="#testi"><li id="text-testi"><img src="images/trait.png" id="pic-testi" class="vishid"><p>item3</p></li></a> 
      <a href="#contact"><li id="text-contact"><img src="images/contact.gif" id="pic-contact" class="vishid"><p>item4</p></li></a> 
     </ul> 
    </nav> 

CSS

.vishid{ 
    visibility: hidden; 
} 

.visvis{ 
    visibility:visible; 
} 

JAVASCRIPT (показать и скрыть изображения при наведении курсора на элементы)

$(document).ready(function(){ 
$("#text-what").hover(function(){ 
    $("#pic-what").addClass('visvis'); 
},function(){ 
    $("#pic-what").removeClass('visvis'); 
}); 

$("#text-training").hover(function(){ 
    $("#pic-training").addClass('visvis'); 
},function(){ 
    $("#pic-training").removeClass('visvis'); 
}); 

$("#text-testi").hover(function(){ 
    $("#pic-testi").addClass('visvis'); 
},function(){ 
    $("#pic-testi").removeClass('visvis'); 
}); 

$("#text-contact").hover(function(){ 
    $("#pic-contact").addClass('visvis'); 
},function(){ 
    $("#pic-contact").removeClass('visvis'); 
}); 
}); 

Я хочу показать изображение, когда я на это соответствующее раздел. Как я могу сделать это с помощью javascript?

Answer 1

Здесь многое происходит. Ваш HTML должен быть технически исправлен. href не должен инкапсулировать LI. Вместо этого ваш href должен быть установлен на блокировку - ширину и высоту 100% - внутри LI. Давайте также переместим класс .vishid в родительский LI. Таким образом, если вы хотите, чтобы это повлияло на что-то еще - помимо изображений - в будущем, было бы легко добавить. Так что будет выглядеть так:

<nav> 
    <ul id="pics"> 
     <li id="text-what" class="vishid"><a href="#def"><img src="images/what.png" id="pic-what"><p>item1</p><</a>/li> 
     <li id="text-training" class="vishid"><a href="#program"><img src="images/training.png" id="pic-training"><p>item2</p></a></li> 
     <li id="text-testi" class="vishid"><a href="#testi"><img src="images/trait.png" id="pic-testi"><p>item3</p></a></li> 
     <li id="text-contact" class="vishid"><a href="#contact"><img src="images/contact.gif" id="pic-contact"><p>item4</p></a></li>< 
    </ul> 
</nav> 

Затем вам нужно настроить CSS для коррекции «неблочный» уровня HREF.

#pics li a { 
    display: block; 
    width: 100%; 
    height: 100%; 
} 

.vishid img { 
    visibility: hidden; 
} 

.visvis img { 
    visibility: visible; 
} 

Наконец, я собираюсь предположить, что вы используете «статьи» в своем HTML для разделов. Не обязательно, но это мой пример.

var clickScroll = false, 
    triggerHighlight = 80; // distance from the top to trigger action 

$(window).scroll(function() { 

    var y = $(this).scrollTop(), 
     yCatch = y + triggerHighlight; 

    // Let's wrap in a variable check. Set this to tru is clicking on navigation 
    // false if simply scrolling 
    if (!clickScroll) { 
     $('article').each(function (i) { 
      var whichArticle = $(this).attr('id'); 

      if ($(this).position().top < yCatch) { 
       var currentArticle = "#" + whichArticle; 
       adjustSubNav(currentArticle); 
      } 
     }); 
    } 

}); 

function adjustSubNav(l) { 
    $('#pics a').each(function (i) { 
     if ($(this).attr('href') == l) { // Add active class to the corresponding menu item 
      $(this).parent('li').removeClass('vishid').addClass('visvis'); 
     } else { 
      $(this).parent('li').removeClass('visvis').addClass('vishid'); 
     } 
    }); 
}