jquery - 如何根据页面滚动位置为对象设置动画

Question

我目前正在使用以下代码根据当前滚动位置显示/隐藏内容:

$(window).scroll(function () {
    if ($(window).scrollTop() >= 409) {
        $('.cliocont').fadeTo('slow', 1.0);
    } else if ($(window).scrollTop() <= 409) {
        $('.cliocont').fadeTo('slow', 0.5);
    }
});

这段代码似乎不起作用有什么原因吗？无论何时 else if 语句代码都有效，但无论何时添加它，内容都不会出现或隐藏。

谢谢， 内森·尼亚梅尔

Answer 1

添加了 .stop() 以防止动画淡入淡出错误
和一个 bool 标志 var io 以防止不必要的动画:

jsBin demo

var $cc = $('.cliocont'),
    io  = false; // flag // compare booleans

$(window).scroll(function () {
  
   var is409 = $(window).scrollTop() >= 409; // boolean
   if (io != is409){
      io = is409;
      $cc.stop().fadeTo(800, is409?1.0:0.5);
   }
 
}); 

是 409 吗？ 1.0 : 0.5 是 Conditional Operator和 它是 if 语句的简写；
bool 值？如果为真 : 否则 ;