Skip to content

Instantly share code, notes, and snippets.

@danielhaim1

danielhaim1/scrollfade.js

Created June 7, 2013 18:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danielhaim1/5731203 to your computer and use it in GitHub Desktop.
Save danielhaim1/5731203 to your computer and use it in GitHub Desktop.
Download ZIP
Change opacity of element based on window scroll
Raw
scrollfade.js
$(document).ready(function() {
var fadeStart=1 // 100px scroll or less will equiv to 1 opacity
,fadeUntil=500 // 200px scroll or more will equiv to 0 opacity
,fading = $('#fading')
;
$(window).bind('scroll', function(){
var offset = $(document).scrollTop()
,opacity=0
;
if( offset<=fadeStart ){
opacity=1;
}else if( offset<=fadeUntil ){
opacity=1-offset/fadeUntil;
}
fading.css('opacity',opacity).html(opacity);
});
});
/** example **/
/***
*
* <body style="height:9999px;">
* <div id="fading" style="background:#aaa;height:500px;">Fading</div>
* </body>
*
*
*
*
***/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment