7

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;
    }
  });
});
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
Juan Bonnett
  • 1,823
  • 1
  • 15
  • 33

4 Answers4

17

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;
  }
});
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • 1
    Ohhh So Clever! This is exactly what I needed! and it's easy to tweak – Juan Bonnett Jan 16 '16 at 20:33
  • The only update to the above script is to start with "jQuery(function($) {" and close the brackets accordingly. Otherwise in developer tools, it will give a script error. Thank you for the answer. – Mugé Aug 01 '21 at 07:57
9

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>
cupoftegan
  • 91
  • 1
  • 4
1

Use rbga instead of rbg and change the alpha value as the user scrolls. I'm obviously not 100% sure what effect you are going for but in most cases using rgba is a better approach than using rgb and opacity.

What are differences between RGB vs RGBA other than 'opacity'

Here is the link to another post that explains this in further detail.

Community
  • 1
  • 1
AlexanderGriffin
  • 515
  • 2
  • 13
  • Thank you good sir for your answer. But I already I know exactly what RGBA and RGB are. This is more a question to find a proper formula to calculate an increasing value from 0.2 to 1 relative to the scroll. – Juan Bonnett Jan 16 '16 at 20:17
  • Ahh I understand - my apologies! That is a much more complicated solution! – AlexanderGriffin Jan 16 '16 at 20:22
  • http://api.jquery.com/scroll/ may help if you are okay with using Jquery, you should then be able to write a simple function where you divide the total amount a user can scroll by 8 and each time it jumps to the next range, increment the opacity by .1, which should put you at 1.0 with maximum scrollage (or minimum scrollage, however you want it) - I hope this at least helps you move in somewhat of a more useful direction. – AlexanderGriffin Jan 16 '16 at 20:25
0

Pretty new to programming. Manage to do it without JQuery

window.addEventListener(`scroll`, function (e) {
  const heroOpas = this.scrollY / 1000;
  if (heroOpas === 0) {
    sectionHero.style.opacity = 1;
  }
  if (heroOpas > 0) {
    sectionHero.style.opacity = `${1 - heroOpas}`;
  }
});
XOBIOS
  • 1