1

最初の「else」だけが機能しません。topColor div は、下にスクロールすると元の高さ 15 から高さ 150 に拡張されますが、上部近くにスクロールしても高さ 15 に戻りません。

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 20) {
            $('#topColor').animate({
                height: "150px"
            });
        } else {
            $('#topColor').animate({
                height: "15px"
            });
        }
        if ($(this).scrollTop() > 300) {
            $("#fixedMenuBar").fadeIn('slow', 'linear');
        } else {
            $("#fixedMenuBar").fadeOut('fast', 'linear');
        }
    });
});
4

1 に答える 1

1

elseスクロール応答アニメーションでは使用しないでください。else if代わりに使用してより具体的にanimateすると、スクロール値が常に変化し、jQuery が同じアニメーションを無限に繰り返すことができないため、競合が発生します。

しかし、どうしてもやりたい場合は、次の方法をanimate試してください。

    var scrollVal = $(this).scrollTop();

    if ( scrollVal < 20 )
      if ( $("#fixedMenuBar").is(':visible') ) {
        $("#fixedMenuBar").fadeOut('fast', 'linear');
      }
      if ( parseInt($('#topColor').css('height')) != 150 ) {
        $('#topColor').animate({ height: "150px" });
      }

    }else if ( scrollVal >= 20 && scrollVal < 300 ) {
      if ( $("#fixedMenuBar").is(':visible') ) {
        $("#fixedMenuBar").fadeOut('fast', 'linear');
      }
      if ( parseInt($('#topColor').css('height')) != 15 ) {
        $('#topColor').animate({ height: "15px" });
      }

    }else if ( scrollVal >= 300 ) {
       if ( !$("#fixedMenuBar").is(':visible') )
        $("#fixedMenuBar").fadeIn('slow', 'linear');
    }

この回答も役立つはずです：ウィンドウスクロールアニメーションのCSS値制限の設定

于 2013-02-27T21:37:34.937 に答える