Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Suleiman Leadbitter
Suleiman Leadbitter
15,805 Points

Percentage of scroll for elements.

I'm a bit of a noobie regarding Javascript and I've tried searching but can't seem to find what I'm after.

I'm basically after a simple script that will add a class depending on the position of the element on the page, so say it's at the bottom .addClass("zeropercent") at the top addClass("hundredpercent") and a few others in between.

Can this be done? Thanks.

2 Answers

Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

Here is a vanilla JS solution.

First, get the height of the page.

var pageHeight = document.body.scrollHeight;

Or if you want a more thorough way to definitively get the height of the document.

var pageHeight = (function () {
    return Math.max(
        document.body.scrollHeight,
        document.documentElement.scrollHeight,
        document.body.offsetHeight,
        document.documentElement.offsetHeight,
        document.body.clientHeight,
        document.documentElement.clientHeight
    );
})();

Then get the element's position.

var el = document.getElementById('footer-bonus');
var elPos = el.getBoundingClientRect();
// getBoundingClientRect() returns an object:
// {
//  bottom: value,
//  height: value,
//  left: value,
//  right: value,
//  top: value,
//  width: value
// }

// Don't need to set another variable, but I like to 
// to help keep things straight.
var elTop = elPos.top;

Then set your conditional. 

// This will give the element a class if 
// it's on the bottom half of the page.
if ( ((elTop / pageHeight)*100) > 50 ) {
 el.setAttribute('class', 'bottomHalfClass');
}

And that should do it.

Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

With jQuery

var docHeight = (function(){
    return Math.max(
        $(document).height(),
        $(window).height(),
        /* For opera: */
        document.documentElement.clientHeight
    );
})();
var el = $('#element');
var elTop = el.offset().top;
var posPercentage = ((elTop / docHeight) * 100);
if (posPercentage < 50) {
    el.addClass('bottomHalfClass')
}
Suleiman Leadbitter
Suleiman Leadbitter
15,805 Points

Wow, thanks Colin Bell really grateful, it's quite educational looking at your solution. This is the Codepen I was working to make a 'moving shadow' effect when scrolling the page. Still not a 100% but I'm going to tinker with it later :)

Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

Ah, I think I originally misunderstood what you were going for.

The above solution could work in a $(window).scroll() function with a little tweaking for optimization.

Try searching for 'Parallax Effect' tutorials. Like this one. I think that's the kind of thing you're going for (only with shadows instead of words).

Christopher Aporta
Christopher Aporta
24,258 Points
Christopher Aporta
Christopher Aporta
24,258 Points

Hey Suleiman,

I haven't done this myself, but it seems like Stack Exchange has a pretty robust thread pertaining to your question. You can find it here.

Hope that helps a bit!

Chris

Suleiman Leadbitter
Suleiman Leadbitter
15,805 Points

Thanks Christopher Aporta I did look but my searching skills are obviously lacking :/

The force was NOT strong in this one.