시차 스크롤링 메뉴 항목

Question

많은 시차 사이트에 사용 된 사이트 및이 기능을 구현하고 있습니다. 메뉴 항목 위로 마우스를 가져갈 때 나타나는 삼각형은 특정 메뉴 항목을 클릭 할 때와 특정 섹션을 스크롤 할 때 명확하게 나타낼 수 있기를 원합니다.

"라이브"를 클릭하면 삼각형이 나타나야하고 분명히 나타나야합니다. 또는 해당 섹션으로 스크롤하면 다른 모든 섹션에도 나타나야합니다. 여기

코드 메신저의 일부와 함께 일하고있다 ... 내가 추가 할 필요가 있다면 알려 주시기 여기 http://jsfiddle.net/lemonhead1374/4HRxr/

는 HTML 더 HTML과 CSS jsfiddle 링크

<div class="header"> 
     <div class="nav"> 
      <div class="inner"> 
     <a href="#home"> home</a> 
     <a href="#live"> live</a> 
     <a href="#learn">learn</a> 
     <a href="#mission">mission</a> 
     <a href="#heal">heal</a> 
     <a href="#adorn">adorn</a> 
     <a href="#sip">sip</a> 
      </div> 
     </div> 
<div> 



<section id="home"> 
<div class="lower"> 
<div class="homecontainer"> 
    <div class="binder"> 
     hi all    
    </div> 
</div> 
</div> 
</section> 

<section id="live"> 
hi alllllllllll hellllloooo 
</section> 

Answer 1

을에 원하는 것을 수행하는 훌륭한 예가 already here at Stack Overflow입니다. 찾고있는 코드와 jsFiddle이 모두 작동하는지 만 알려주지는 않지만 멋지고 컴팩트하며 플러그인이 필요하지 않습니다. See it here.

플러그인을 사용하려는 경우 바로 자바 스크립트 called skrollr을 사용하는 재미있는 플러그인이 있습니다. 스크롤 이벤트에 응답하고 중단 점을 코딩하는 데 매우 직관적 인 방법을 사용합니다. 한 번보기 가치.

나는 당신이 당신의 기본 HTML이 사방에 중첩 된 div의 불필요한 ID의 매우 투박한 (많이 존재하지-짝수 거의하지 만 문제의 모든 종류의,이 코드를 볼에 점에 유의해야한다 - 시맨틱 마크 업 등).하지만 자바 스크립트는 모든 종류의 오류를 던지고 있습니다. 아마도 다른 사이트에서 많은 양의 코드를 복사했기 때문일 것입니다. 교차 출처 문제, 웹 폰트 및 이미지를 찾을 수없는 등 모든 종류의 플래그가 있습니다. 코드는 mess ™입니다. 이것이 학습 운동이라면, 그것은 중요하지 않습니다. 그러나 이것이 다른 사람을위한 클라이언트 작업이라면, 모든 것을 고쳐야 할 것입니다. 시작하려면 숙제해야 할 필요가 있습니다. 당신이 초보자라면 당신은 적절한 코딩 기술에 좋은 리뷰를 원하는 경우에도

하거나, 적절한 HTML과 CSS 코딩을 학습 ample resources all over the internet이 있고, 나는 높은는 tutorials at Code Academy 겪고 추천 할 것입니다.

앞에서 설명한 것처럼 제공된 URL이 자신의 연구를위한 것일 뿐더라도 완전히 이해할 수있는 방법이지만 Code Academy이 더 효율적일 수 있습니다.