3

easy-scroll は、1 つのアンカー タグを含む div です。

<div id="ease-scroll">
    <a href="#">&uarr; Top</a>      
</div>

scrollTop() が 450 より大きい場合、div の不透明度を 0.9 にする必要があります。これは期待どおりに機能し、スクロールアップしてscrollTop() の値が 450 未満の場合、不透明度を元の値 0.1 に戻します。しかし、不透明度の値を元に戻すことは起こっていません。何が悪いのか手がかりはありますか？

// Help navigate!
jQuery(window).scroll(function () { 
    if ( jQuery(window).scrollTop() > 450 && jQuery("#ease-scroll").css("opacity") != 0.9 ) {
       jQuery("#ease-scroll").animate( {opacity: 0.9}, 'medium');
    }
    if ( jQuery(window).scrollTop() < 450 && jQuery("#ease-scroll").css("opacity") != 0.1 ) {
        jQuery("#ease-scroll").animate( {opacity: 0.1}, 'medium');
    }
});
4

2 に答える 2

1

Scrollイベントは、ユーザーがスクロールしているときに何度も発生します。各イベントにanimation（）を使用することは、ユーザーのCPUリソースを無料で使用するため、お勧めできません。

回避策は次のとおりです。

// Help navigate!
jQuery(window).scroll(function () { 
    jQuery("#ease-scroll").stop(); // stop animation before anything else
    if ( jQuery(window).scrollTop() >= 450 && jQuery("#ease-scroll").css("opacity") != 0.9 ) {
       jQuery("#ease-scroll").animate( {opacity: 0.9}, 'medium');
    }
    if ( jQuery(window).scrollTop() < 450 && jQuery("#ease-scroll").css("opacity") != 0.1 ) {
        jQuery("#ease-scroll").animate( {opacity: 0.1}, 'medium');
    }
});

ただし、必要に応じてリセットされるsetTimeOutを定義して、CPU使用率をゼロにする必要があります（テストされていない、小さな構文エラーの可能性があります：o）

// Help navigate!
var animationTimeout = null;
jQuery(window).scroll(function () { 

    // Clear planned animation
    clearTimeout(animationTimeout);

    // Define animation start after 500 ms if no others scroll events occurred

    if ( jQuery(window).scrollTop() >= 450 && jQuery("#ease-scroll").css("opacity") != 0.9 ) {
        animationTimeout = setTimeout(function(){
        jQuery("#ease-scroll").stop();
        jQuery("#ease-scroll").animate( {opacity: 0.9}, 'medium');
        },500);
    } 
    if ( jQuery(window).scrollTop() < 450 && jQuery("#ease-scroll").css("opacity") != 0.1 ) {
        animationTimeout = setTimeout(function(){
        jQuery("#ease-scroll").stop();
        jQuery("#ease-scroll").animate( {opacity: 0.1}, 'medium');
        },500);
    }
});
于 2012-11-03T07:24:32.070 に答える
1

jsBinデモ

jQuery(function( $ ){

   $(window).scroll(function(){
       
      var scrolled = $(window).scrollTop();
      $("#ease-scroll").stop().animate({opacity: (scrolled>450 ? 0.9 : 0.1) }, 600);

   });

});
于 2012-11-03T07:24:45.037 に答える