为什么CSS中的display none没有被fadein去掉？

Question

所以我试图让 div 在达到滚动阈值时淡入。它以显示开始：none；在 css 中为其 div id。当达到阈值时，淡入不移除display:none；来自css，正如我读过的那样。

CSS:

#SideBanner01{
  display: none;
  right: 0;
  margin-left: 60.4%;
  margin-right: 3%;
  margin-top: .25%;
  overflow: hidden;
}

#SideBanner01 img{
  width: 206.25%;
  margin: -30% -15% -8% -140%;
}

Javascript:

$(window).scroll(function () {
  var delay = 500;
  var scrollTop = $(window).scrollTop();
  if (scrollTop > 20) {
    $('#SideBanner01').fadeIn(delay);
  }
  else{
    $('#SideBanner01').hide();
  }
});

fadein 运行后的 Inspector：

element {
    position: fixed;
}
#SideBanner01 {
    display: none;
    right: 0;
    margin-left: 60.4%;
    margin-right: 3%;
    margin-top: .25%;
    overflow: hidden;
}
body {
    color: #000000;
    text-align: left;
}

Html:

<div style="position: fixed;" id="SideBanner01"><img src="http://survey.unifocus.com/ClientFiles/19500/Bardessono-stone-wheels.jpg"></div>

我正在使用 jquery 1.6，所以我相信 fadein 应该可以正常工作。知道发生了什么事吗？我已经能够得到“$('#SideBanner01').show(delay);”工作，但它从侧面飞进来，但看起来很俗气。提前致谢。

Answer 1

你是不是想做：

$(window).scroll(function () {
  var delay = 500;
  if ($(this).scrollTop() > 20) {
    $('#SideBanner01').fadeIn(delay);
  }
  else{
    $('#SideBanner01').hide();
  }
});

在您的代码片段中，scrollTop 用作常规变量（未定义）。

为什么CSS中的display none没有被fadein去掉？

Why is display none in the CSS not removed by fadein?

html

javascript

css

jquery

fadein