javascript - jQuery 不透明度缓慢淡入淡出

Question

我有一个屏幕 div 覆盖在超大横幅集的顶部。从一开始，覆盖层的不透明度需要设置为 0.5 ，然后当用户开始滚动大约 300px 的时间段时，它会逐渐淡出到 0.9 code> 不透明度然后停止，如果用户从顶部向上滚动到小于 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();
  });
});