Erhöhen element Deckkraft, wenn der Benutzer scrollt auf der Seite nach unten

Ich habe gesehen, eine Menge der Fragen zu ändern ein element Deckkraft, wenn der Benutzer scrollt, aber habe noch nicht eines gefunden, das mir hilft, die Art und Weise, die ich brauche. Ich habe versucht, mehrere Formeln und nicht in der Lage, um den Effekt zu erzielen, die ich will.

Ich habe einen header mit einem BG-image, und darin ein div, dass ich als overlay verwenden, und ich will es dunkler und dunkler, glatt (Deckkraft zu erhöhen), während der Benutzer scrollt.

EDIT:
Der gewünschte Effekt ist:

Deckkraft ist standardmäßig eingestellt auf 0,2 in CSS. Wenn der Benutzer beginnt, nach unten scrollen, es wird starten Sie die von 0,2-1. Wenn der Benutzer scrollt bis es wieder Abnahme von 1 (oder was auch immer Wert) von 0,2.

Fiddle: https://jsfiddle.net/z7q2qtc6/

<div class='nice-header'>
  <div class='header-overlay'></div>
</div>

CSS

.nice-header {
  position: relative;
  height: 300px;
  background: center center;
  background-size: cover;
  background-image: url(http://www.boeing.com/resources/boeingdotcom/commercial/787/assets/images/marquee-787.jpg);
}

.header-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgb(0,0,0);
  opacity: 0.2;
}

JS

$(window).scroll(function() {
  $('.header-overlay').css({
    opacity: function() {
      var opacity = 0;
      //TODO:
      //Set opacity to a higer value whilst user scrolls
      return opacity;
    }
  });
});

InformationsquelleAutor Juan Bonnett | 2016-01-16

Schreibe einen Kommentar