Change opacity gradually with scroll

Question

I want to apply opacity at the bottom of my site, the footer is fixed on bottom and behind the rest of the site type effect Parallax. But I can not make it gradually become opaque, so scroll the opacity that was at zero get 1 once the scrollbar arrived at my footer.

This is the div of the footer:

<div id="rodape" class="rodape"></div>

This is the css:

#rodape {
    position: fixed;
    bottom: 0;
    z-index: -1;
}
.rodape {
    width: 100%;
    height: auto;
    background-color: #00e676;
}

Within the div I will put other elements like address, Google map, etc. Like the div is behind the rest of the site and fixed on bottom, start to appear I want the opacity to be 0 and with the scroll increases up to 1 when the scroll ends, because it will be the end of the site.

I’m using the information of this codepen and that js:

var scroll = $('#rodape');
var range = 200;

$(window).on('scroll', function () {

  var scrollTop = $(this).scrollTop(),
      height = heade.outerHeight(),
      offset = height / 2,
      calc = 1 - (scrollTop - offset + range) / range;

  scroll.css({ 'opacity': calc });

  if (calc > '1') {
    scroll.css({ 'opacity': 1 });
  } else if ( calc < '0' ) {
    scroll.css({ 'opacity': 0 });
  }

});

You realize that I don’t know much about javascript, right, but I want to leave it at that, does anyone know where I’m going wrong? Is there any way to make it work, or some other solution?

Answer 1

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

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

.encheLinguissa {
  height: 900px;
}

.rodape {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: rgb(0, 0, 0);
  opacity: 0;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='encheLinguissa'>

</div>

<div class='rodape'>

</div>

To calculate opacity, subtract the scrollTop from the div height and then divide it by the div height.

Source:

scrollTop() - This method returns the vertical position of the scrollbar for the matching element (div class rodape)

Other Solution:

The condition (>1200) on the line if($(document).scrollTop()>1200){ must have a value compatible with the page height (in this example height: 1500px;)

The lower the value of the condition (>1200) div rodape will come up with less scrolling.

    var div = $('.rodape');
    $(window).scroll(function(){
       if($(document).scrollTop()>1200){
          var percent = $(document).scrollTop() / ($(document).height() - $(window).height());
          div.css('opacity', 0 + percent);
       }else{
          div.css('opacity', 0);
       }

    });

.encheLinguissa {
  height: 1500px;
}

.rodape {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: #00e676;
  opacity: 0;
  z-index: 1;
  transition: opacity 1.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='encheLinguissa'>
qqqqqqqqqqqq
</div>

<div class='rodape'>
<p>aaaaaaaaaaa</p>
<p>bbbbbbbbbbb</p>
<p>ccccccccccc</p>
</div>

Transition - causes the transition to occur smoothly at a certain time.