0

水平スクロールサイトを作成しています。メニューリンクをクリックするたびに、scrolltoを使用して選択したセクションにスクロールしますが、リンクではなくスクロールを使用してセクションにスクロールすると、ナビゲーションのスタイルが乱れます。問題は、scrollイベントにコードがあり、scrolltoがscrollイベントを発生させることだと思います¿

私が達成したいのは、次の場合にナビゲーションメニューで現在のリンクを強調表示することです：1）クリックする2）ブラウザのスクロールバーでセクションに手動でスクロールする3）次/前のリンクをクリックする

たぶん問題はこの部分にあります：

var position = Math.abs( $('#slider ul').offset().left - 138 );
$('p.status').html( 'index:' + getCurrentSectionIndex(position) );

//disable the scroll event so it doesn't broke the flow
$('#slider').unbind('scroll',handler);

//scrolls to the selected section
$('#slider').scrollTo($('#' + $(this).attr('class')), 800, { axis: 'x' });

//enable again the scroll event
//$('#slider').bind('scroll',handler);
var timeout = setTimeout(function() {
    $('#slider').bind('scroll',handler);
}, 3000);

私はjqueryを初めて使用するので、改善できることがあれば教えてください。アドバイスを歓迎します:)

これをうまく説明したかどうかわからないので、これはコードjsfiddleです

この質問のコードの一部を使用しています

4

1 に答える 1

0

さて、私はあなたのコードの「より単純な」バージョンを作成しました、そしてそれはあなたが望むように働いているようです。

jsfiddleのライブデモを見るには、ここをクリックしてください

アップデートの一部は次のとおりです。

変数indexは、現在のアイテムのインデックスを受け取ります。

によるとindex、ナビゲーションの対応するアイテムはeq:()セレクターを使用して強調表示され、私はこれと同じ方法を使用してページをスクロールしています。

そしてonAfter、ScrollToプラグインのコールバック（）を使用してスクロールイベントを再度バインドします。

$('#slider').scrollTo('ul li:eq(' + index + ')', 800, {
    axis: 'x',
    onAfter: function() {
        $('#slider').bind('scroll', handler);
    }
});

私は疑いの余地があります！

于 2012-07-04T14:31:01.610 に答える