jQuery Opazität langsam Fade

Question

Ich habe eine Bildschirm-Div-Overlay auf einem übergroßen Banner-Set. Von Anfang an muss das Overlay auf 0.5 Opazität gesetzt werden, dann, wenn der Benutzer scrollt über einen Zeitraum von etwa 300px scrollen Sie sanft zu 0.9 Deckkraft und stoppt dann bei, wenn der Benutzer zurück scrollt bis zu weniger als 300px von oben dann Es beginnt langsam zu verschwinden 0.5 Opazität. Ich verwende nur eine Hintergrundfarbe für das div.

Ich bin ein wenig fest, obwohl. Ich habe die unten so weit, aber wie Sie scrollen beginnen geht es zu 0 Opazität startet dann davon und verblassen zu 0.9, dann um 300px geht es zu 1 Opazität dann nach 301px wenn zurück springt auf 0.9 Opazität.

$(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();}); 
}); 

Ich brauche es nur so, wenn die Seite die Opazität geladen 0.5 ist, zwischen Scrollen es langsam zu 0.9 verändert und bleibt, dann, wenn wieder nach oben scrollen es zurück zu 0.5 Opazität verblasst.

Danke für jede Hilfe.

Answer 1

Wie über dieses

$(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(); 
    }); 
});