wordpress sidebar 스크롤 및 클릭시 활성 링크 강조 표시

Question

사용자 지정 메뉴를 만들고 페이지의 기본 세로 막대에 추가했습니다. 해당 사용자 지정 메뉴에는 하나의 기본 페이지에 앵커 페이지에 대한 링크가 있습니다. 이 링크들 각각은 그들 자신의 커스텀 CSS 클래스 (.feat1, .feat2)를 가지고있다.

현재 URL을 기반으로 링크 색상을 변경하려고합니다. /url/portfolio/# feat1,/url/portfolio/# feat2 등을 (스크롤하거나 클릭하여) 탐색합니다.

나는 많은 CSS 코드를 시도했는데 가장 가까운 것은이 것이 었습니다. 나는 이러한 링크 중 하나를 클릭하지만 난 다음 페이지로 스크롤 할 때 그것은 새로운 링크로 변경 실 거예요 때

#nav_menu-2 .feat1 a:focus{ 
    color: #f00; 
    background: #ff0; 
} 
//did this for .feat2 too 

이 변화와 새로운 색상을 유지합니다.

: active과 동일한 코드를 시도했는데 실제로 읽은 코드는 현재 URL을 기반으로 변경해야하지만 현재로서는 그렇지 않습니다. 스크롤 할 때 URL이 변경되면이를 감지하고 클릭 시간 프레임의 링크 색상 만 변경합니다 (이 후에 기본 색상으로 되돌아갑니다). 단지 그것을 전송 한 후 때, 클릭 순간에 색상을 변경, 개별 클래스를 사용하는 등

#sidebar .current-menu-item a:active{ 
    color: #f00; 
    background: #ff0; 
} 

같은 "활성":

나는 또한 #sidebar 클래스에 대해 "현재 메뉴 항목"을 사용하여 시도 앵커 페이지로 이동하면 링크가 다시 기본값으로 돌아갑니다.

여기에 무슨 문제가있을 수 있습니다.

감사

Answer 1

CSS :active 및 :focus은 그 자체로 이벤트를 스크롤 응답하지 않습니다. 스크롤 위치를 기준으로 하이라이트를 조정하려면 window.onscroll 이벤트 리스너를 사용하여 스크롤 위치를 모니터링해야합니다. 스크롤 높이가 섹션에 해당하는 범위 내에 있으면 탐색 할 요소를 강조 표시 할 클래스를 지정할 수 있습니다.

여기에 도움이되는 라이브러리가 있습니다. 다양한 라이브러리에서 사용되는 일반 이름은 scrollspy입니다.

일부 라이브러리 :

• http://imakewebthings.com/waypoints/
• http://getbootstrap.com/javascript/#scrollspy

당신이 순수 자바 스크립트에서 직접 구현하는 경우, 나는 debounce 기능에 이벤트 핸들러를 포장하는 것이 좋습니다. 이렇게하면 처리기가 너무 자주 발사되는 것을 방지 할 수있어 불필요한 CPU/배터리 소모를 유발하고 스크롤 동작이 불안정해질 수 있습니다.

jQuery를/중간 지점 예 :

$("h2").waypoint(function(direction){ 
    $("#nav-menu a").removeClass("active"); 
    $("#nav-menu a[href='#" +this.element.id+"']").addClass("active"); 
});