On Scroll 메뉴의 색상 변경 HTML

Question

우선이 영역에서 초보자입니다. 나는 이것에 관해 조사하려고 노력했다. 그러나 내가 원하는 것에 적합하지 않은.

그래서 나는이 HTML을 가지고 :

 <script type="text/javascript"> 
$(document).ready(function(){  
      var scroll_pos = 0; 
      $(document).scroll(function() { 
       scroll_pos = $(this).scrollTop(); 
       if(scroll_pos > 210) { 
        $("li").css('background-color', 'blue'); 
       } else { 
        $("li").css('background-color', 'red'); 
       } 
      }); 
     }); 
     </script> 

내가 스크롤에 <li>의 색상을 변경하는 방법을 알고 싶습니다

을 : 나는이 코드를 시도했지만 작동하지 않았다

<aside> 
    <div align="center"> 
    <img src="images/teste.jpg" style="width:200px;height:200px;"> 
    </div> 
    ... 
    <div id="disciplinas"> 
    <h3>Disciplinas:</h3> 
    <li><a href="#x">x</span></a></li> 
    <li><a href="#y">y</span></a></li> 
    <li><a href="#z">z</span></a></li> 
    <li><a href="#w">w</span></a></li> 
    <br/> 
    </div> 
</aside> 

<div id="main"> 
<section id="x"> 
<div> 
<img src="images/teste.jpg"> 
</div> 
</section> 

<section id="y"> 
<div> 
<img src="images/teste.jpg"> 
</div> 
</section> 
... 

, 그들이 올바른 섹션 (또는 어쩌면 내가 대신 div를 사용해야합니다)에 도착. 감사

는, DIV의 disciplinas 및 선형의 CSS를 도움이된다면

:

#disciplinas { 
    border: 1px solid; 
    margin-top: 5%; 
    margin-bottom: 5%; 
    text-align: center; 
    box-shadow: 10px 10px 5px #DCDCDC; 
    background-color: white; 
} 

li { 
    text-align: center; 
    list-style-type: none; 
} 

Answer 1

추가 jQuery 라이브러리의 js 파일이

불필요한 HTML 태그를 제거

<aside> 
    <div align="center"> 
    <img src="images/teste.jpg" style="width:200px;height:200px;"> 
    </div> 
    ... 
    <div id="disciplinas"> 
    <h3>Disciplinas:</h3> 
    <li><a href="#x">x</a></li> 
    <li><a href="#y">y</a></li> 
    <li><a href="#z">z</a></li> 
    <li><a href="#w">w</a></li> 
    <br/> 
    </div> 
</aside> 

<div id="main"> 
<section id="x"> 
<div> 
<img src="images/teste.jpg"> 
</div> 
</section> 

<section id="y"> 
<div> 
<img src="images/teste.jpg"> 
</div> 
</section> 

https://jsfiddle.net/rq6rgrcj/

Answer 2

이 코드를 확인하십시오 : http://codepen.io/yuki-san/pen/eJqLNO

섹션이 스크롤 이벤트와 연결된 방식과 아이디어를 볼 수 있습니다. 이제를 사용하고 단지 밑줄

대신 리튬 배경색을 변경 만들기 CSS 클래스는 말할 수 - scrollColor 및 jQuery를 윈도우가 바로 이곳에 스크롤

을

.addClass(".scrollColor") 

사용하여 추가 할 때 제거 멀리

Answer 3

스크롤

$(window).scroll(function() { 
    var scroll_pos= $(window).scrollTop(); 

    if(scroll_pos > 210) { 
        $("li").css('background-color', 'blue'); 
       } else { 
        $("li").css('background-color', 'red'); 
       } 
}); 

그것이 도움이되기를 바랍니다,이 코드를 사용해보십시오.