Skip to content

Instantly share code, notes, and snippets.

@clarknelson
Created August 27, 2014 23:30
Show Gist options
  • Save clarknelson/9e6004874fb0fe12322f to your computer and use it in GitHub Desktop.
Save clarknelson/9e6004874fb0fe12322f to your computer and use it in GitHub Desktop.
Highlight on scroll
$(window).scroll(function(){
var top = $(window).scrollTop();
var offset = 130;
var trigger = top+offset;
var elements = $('h1, h2, li');
checkElements(trigger, elements);
});
function checkElements(top, el){
// circle through elements
for (var i=0; i<el.length; i++){
// get top and bottom of element
// color is triggered when in between
var up = el[i].offsetTop;
var height = el[i].clientHeight;
var bot = up+height;
if(el[i].className == 'active'){
if(top < up || top > bot){
el[i].className = '';
}
} else if (top > up && top < bot){
el[i].className = 'active';
}
}
}
@clarknelson
Copy link
Author

Wrote this code to highlight elements as you scroll down the page for my Portfolio.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment