Question

ease-scroll是一个带有一个锚标记的div。

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

当scrollTop（）大于450时，我需要div的不透明度为0.9，这可以按预期工作，如果我现在滚动向上，那么scrollTop（）值小于450，I想要将不透明度恢复为原始值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');
    }
});

Answer 1

滚动事件在用户滚动时会被触发很多次。对每个事件使用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);
    }
});

Answer 2

jsBin demo

jQuery(function( $ ){

   $(window).scroll(function(){

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

   });

});

如果scrollTop小于指定值，则设置动画 - 不起作用

2 个答案:

jsBin demo