単一ページの Wordpress サイトで、このスクリプトを少し変更したバージョンを使用しています: ページ スクロールでアクティブなメニュー項目を変更しますか?
私が変更したのは、メニューの UL ID、topMenuHeight、およびスクロールの期間だけです。なんらかの理由で、最初の 2 つの項目が機能しています。「id」変数をコンソールに出力していましたが、常にサービスが表示されていました。何が起きているのかよくわかりません。
単一ページの Wordpress サイトで、このスクリプトを少し変更したバージョンを使用しています: ページ スクロールでアクティブなメニュー項目を変更しますか?
私が変更したのは、メニューの UL ID、topMenuHeight、およびスクロールの期間だけです。なんらかの理由で、最初の 2 つの項目が機能しています。「id」変数をコンソールに出力していましたが、常にサービスが表示されていました。何が起きているのかよくわかりません。
個人的には、メニューの順序を変更しなければならない理由に対する明確な答えはありませんが、CSS の設計方法を少し変更すると、問題を解決できます。
前述のように、「li」リンクがすべて規則正しい順序でリストされていることを確認する必要があります。
この時点から、いくつかの CSS を修正すると、同じように見えるように操作できます。
行 27-28 を次のように変更すると、CSS 内で次のようになります。
#menu-main-menu {padding:30px 50px 0 0; float: right}
#menu-main-menu li {float: left; list-style: none outside none; margin-left: 30px; text-transform: uppercase;}
基本的に、#menu-main-menu を右フロートに設定する代わりに、メニューを右フロートに、メニューを左フロートに変更して、適切な順序に設定します。
追加した #menu-main-menu の内部
float:right;
そして #menu-main-menu li の中で float:right を変更しました
float:left;
コードをライブで見たい場合は、http: //jsfiddle.net/GpjMc/1/にアクセスしてください。
float:left の代わりにインラインで表示することもできます。どんなフォーマットでもあなたに最適です。
#menu-main-menu {padding:30px 50px 0 0; float: right}
#menu-main-menu li {display: inline; list-style: none outside none; margin-left: 30px; text-transform: uppercase;}
jQueryウェイポイントを使用できます
http://imakewebthings.com/jquery-waypoints/
次に、jquery を使用して、特定の要素にスクロールするときにアクティブなクラスを変更します
$('.thing').waypoint(function(direction) {
jQuery("li.someItem").addClass("active");
});