wordpress sidebarスクロールしてクリックするとアクティブなリンクが強調表示されます

Question

私はカスタムメニューを作成し、ページのデフォルトのサイドバーに追加しました。 そのカスタムメニューには、1つのメインページにアンカーページへのリンクがあります。これらのリンクのそれぞれに独自のカスタム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クラスの「現在のメニュー項目を」使用してみました：それは送信するときに、個々のクラスを使用するなど、

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

同じ、「アクティブ」は唯一、その後、クリックした瞬間に色が変化あなたはアンカーページにリンクがデフォルトに戻ります。

ここで何が間違っているのでしょうか？

おかげ

Answer 1

CSS :activeと:focusは自分でイベントをスクロールする応答しません。スクロール位置に基づいてハイライトを調整する場合は、window.onscrollイベントリスナーを使用してスクロール位置を監視する必要があります。スクロールの高さがセクションに対応する範囲内にある場合、ハイライトされるナビゲーション要素にクラスを割り当てることができます。

これを支援するライブラリがあります。さまざまなライブラリで使用されている一般的な名前はscrollspyです。

いくつかのライブラリ：あなたは純粋なJavaScriptでそれを自分で実装する場合

• 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"); 
});