jQuery opacity slow fade

Question

我在超大横幅集上面有一个屏幕div覆盖。从一开始，叠加层需要设置为0.5不透明度，然后当用户开始滚动大约300px个滚动时，它会轻轻地淡化到0.9不透明度然后停在那里，如果用户从顶部向上滚动至小于300px，然后开始慢慢淡化回0.5不透明度。我只是在div上使用背景颜色。

我有点卡住了。到目前为止我有以下内容，但是当你开始滚动时，它会转到0不透明度，然后从那里开始淡出到0.9，然后在300px它变为1不透明度然后在301px之后，如果跳回0.9不透明度。

$(function () {
    divFade = $(".fadeScreen");
    var toggleHeader = function (noAnimate) {

        var threshold  = 1,
            fadeLength = 300,
            opacity,
            scrollTop  = $(document).scrollTop();

        if (scrollTop < threshold) {
            opacity = 0.5;
        } else if (scrollTop > threshold + fadeLength) {
            opacity = 0.9;
        } else {
            if (noAnimate) {
                opacity = 0.9;
            } else {
                opacity = (scrollTop - threshold) / fadeLength;
            }
        }
        divFade.css("opacity", opacity);
    };

    toggleHeader(true);
    $(window).scroll(function () {toggleHeader();});
});

我只是需要它，所以当加载页面时，不透明度为0.5，在0-300px之间滚动它会缓慢变为0.9并保持不变，然后当向后滚动时它会逐渐消失0.5不透明度。

感谢您的帮助。

Answer 1

这个怎么样

$(function() {
  divFade = $(".fadeScreen");
  var toggleHeader = function(noAnimate) {

    var threshold = 1,
      fadeLength = 300,
      minOpacity = 0.5,
      maxOpacity = 0.9,
      opacity = minOpacity,
      opacityDiff = (maxOpacity - minOpacity),
      scrollTop = $(document).scrollTop();

    if (scrollTop < fadeLength) {
      opacity += (scrollTop / fadeLength) * opacityDiff;
    } else {
      opacity = maxOpacity;
    }
    console.log(scrollTop);
    divFade.css("opacity", opacity);
  };

  toggleHeader(true);
  $(window).scroll(function() {
    toggleHeader();
  });
});