0

以下を見ると、オフセット -185 にいくつかのクラスを追加しています。下にスクロールすると、2 つのクラスがアニメーション化/フェードインされます。オフセットを超えて上にスクロールしたときにバーをフェードアウトさせたいのですが、これを達成するのに苦労しています。jQuery ウェイポイント スクリプトを使用していますhttp://imakewebthings.com/jquery-waypoints/

$('#wrapper').waypoint(function(event, direction) {
    $('#scroll-action').toggleClass('hidden', direction === "up");
}, {
    offset: -185
}).find('#scroll-action').waypoint(function(event, direction) {
    $('#scroll-action').removeClass('hidden');
    $(this).parent().toggleClass('sticky', direction === "down");
    $('#scroll-action').addClass('animated fadeIn');
    event.stopPropagation();
}, {
    offset: -185
});
4

1 に答える 1

0

問題を解決しやすくするために、少し単純化する必要があると思います。ロジックと交換する必要がありますが、ウェイポイントのみを使用するように単純化することが#wrapper道だと思います。下にスクロールし#wrapperてウィンドウの 185 ピクセル上に来ると、フェードインし#scroll-actionます。上にスクロールするとフェードアウトします。#scroll-actionウェイポイントもオンにすると、2つが競合する可能性があると思います。

$(function() {
  $('#wrapper').waypoint(function(event, direction) {
    if(direction === "up") {
      $('#scroll-action').fadeOut();
    } else {
      $('#scroll-action').fadeIn();
    }
  }, { offset: -185});
});

これは、あなたがしていることに似た jsFiddle です。これを実際に見ることができます。 HTML ウィンドウを小さくするようにしてください。

于 2012-12-13T19:06:03.863 に答える