jQuery不透明度缓慢淡入淡出

Question

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

我有点卡住了。到目前为止，我有以下内容，但是当您开始滚动时，它会转到0 opacity 然后从那里开始并淡入0.9，然后在300px 它转到1 opacity 然后在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();
  });
});