0

単一ページの開発 (ボディ スクロール トップ アニメーション) 最初にデモを確認し、'menu li a' http://jsfiddle.net/sUMaa/1/でアクティブ クラスの追加/削除を参照してください。

すべて問題ありませんが、単一の問題マウスでページをスクロールしている間、同じアクティブなクラス関数が必要です

jQuery('ul li a').click(function(){
        var idName = jQuery(this).attr('href');
        var idNameFixTop =  jQuery(idName).offset().top; 
        jQuery('html, body').animate({scrollTop:idNameFixTop}, 1000);

        jQuery('ul li a').removeClass('active');
        jQuery(this).addClass('active');
});
4

2 に答える 2

1

私はあなたの問題を理解していますが、これを自分で実装すると、いくつかのトリッキーな質問が発生する可能性があります。

  • ナビゲーション要素がアクティブに設定される前に表示される要素の量
  • 複数の要素が現在表示されている場合に強調表示するもの

作業を楽にするために、jQuery Waypoints プラグインなどを使用してください。Docsを見てください。ほとんどすべてを制御できます。

コードの例:

$('div').waypoint(function() {
  $('ul li a').removeClass('active');
  var currentIndex = $('div').index($(this));
  $('ul li:eq(' + currentIndex + ') a').addClass('active');
},
{
  offset: 'bottom-in-view'
});
于 2013-01-14T11:30:25.323 に答える
1

どちらの方法でも、 twitter ブートストラップ Scrollspyを使用できます。正常に動作します:)

于 2014-04-22T05:53:17.460 に答える