delarge
10/3/2017 - 10:32 AM

Opacity change on scroll

Opacity change on scroll

// Opacity on scroll

var header = $('.intro');
var range = 200;

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

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

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

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

});