×

Welcome to TagMyCode

Please login or create account to add a snippet.
1
0
 
1
Language: Javascript
Posted by: Nicole Patten
Added: Sep 13, 2016 2:43 PM
Views: 17
Tags: no tags
  1.     var surfHeroContent = $('.surf-hero .inner-content');
  2.     var fadeStart = 100; // 100px scroll or less will equiv to 1 opacity
  3.     var fadeUntil = 600; // 200px scroll or more will equiv to 0 opacity
  4.     //change the opacity of the hero copy on scroll
  5.     $(window).on('scroll', function(e) {
  6.         var scrollLength = $(window).scrollTop();
  7.         var opacity = 0;
  8.         if (scrollLength <= fadeStart) {
  9.             opacity = 1;
  10.         }
  11.         if (scrollLength <= fadeUntil) {
  12.             opacity = 1 - scrollLength / fadeUntil;
  13.         }
  14.         surfHeroContent.css({
  15.             'opacity': opacity
  16.         });
  17.     });