Изменение цвета текста текста при прокрутке и при нажатии

Question

У меня есть разные разделы div на одной странице с разными идентификаторами. Пример:

<section> 
    <div id="first"></div> 
</section> 

<section> 
    <div id="second"></div> 
</section> 

<section> 
    <div id="third"></div> 
</section> 

И у меня есть горизонтальная навигация сказать, например:

<div class="nav"> 
    <ut> 
     <li><a href="#first">First</a></li> 
     <li><a href="#second">Second</a></li> 
     <li><a href="#third">Third</a></li> 
    </ul> 
</div> 

Что я хочу:

1. Когда я прокрутите вниз к различным разделам цвет навигационной тексте должен изменение. Например, если я прокручиваю вниз до <div id="second"></div>, тогда цвет <li><a href="#second">Second</a></li> должен измениться.

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

3. Когда я нажимаю на любую навигацию и перехожу к определенному разделу, она неожиданно появляется без каких-либо эффектов. Я хочу добавить эффект jQuery типа slideUp при щелчке.

Пожалуйста, помогите мне devs.

Answer 1

Я нашел решение своего ответа. Следующий код делает все. Он изменяет #id из URL-адреса и в соответствии с ним изменяет цвет шрифта навигации.

Код:

$(document).bind('scroll',function(e){ 
    $('div').each(function(){ 
     if ($(this).offset().top < window.pageYOffset + 10 && $(this).offset().top + $(this).height() > window.pageYOffset + 10){ 
      window.location.hash = $(this).attr('id'); 

      if($(this).attr('id') == "first"){ 
       $("#navlist a").css('color', 'white'); 
       $("#nav1").css('color', 'red'); 
      }else if($(this).attr('id') == "second"){ 
       $("#navlist a").css('color', 'white'); 
       $("#nav2").css('color', 'red'); 
      }else if($(this).attr('id') == "third"){ 
       $("#navlist a").css('color', 'white'); 
       $("#nav3").css('color', 'red'); 
      } 

     } 
    }); 
});