Increase element opacity when user scrolls down the page

Question

I've seen a lot of question related to modifying an element opacity when user scrolls but haven't found one that helps me the way I need. I have tried several formulas and haven't been able to achieve the effect I want.

I have a header with a BG image, and inside it a div that I use as an overlay, and I want it to get darker and darker smoothly (opacity increase) while the user scrolls down.

EDIT: The desired effect is:

Opacity is by default set to 0.2 in CSS. When user starts scrolling down it will start increasing from 0.2 to 1. When user scrolls up again it will decrease from 1 (or whatever value it was) to 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;
    }
  });
});

Answer 1

You can retrieve the current scrolling position by using the .scrollTop() method.

To calculate the opacity, subtract the scrollTop value from the height of the element and then divide that by the element's height.

Example Here

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();

  $('.header-overlay').css({
    opacity: function() {
      var elementHeight = $(this).height();
      return 1 - (elementHeight - scrollTop) / elementHeight;
    }
  });
});

If you want to account for the element's initial opacity of 0.2:

Updated Example

$('.header-overlay').css({
  opacity: function() {
    var elementHeight = $(this).height(),
        opacity = ((1 - (elementHeight - scrollTop) / elementHeight) * 0.8) + 0.2;

    return opacity;
  }
});

Answer 2

For anyone trying to do this but in the reverse (the elements fades out as you scroll)

opacity = ((elementHeight - scrollTop) / elementHeight);

$(window).scroll(function() {
    var scrollTop = $(this).scrollTop();

        $('.header-overlay').css({
        opacity: function() {
            var elementHeight = $(this).height(),
            opacity = ((elementHeight - scrollTop) / elementHeight);
            return opacity;
        }
    });
});

.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: 1;
}

.dummy {
  height: 900px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='nice-header'>
  <div class='header-overlay'>

  </div>
</div>
<div class='dummy'>

</div>