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
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.
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.
var el = $('#element');
var elTop = el.offset().top;
var posPercentage = ((elTop / docHeight) * 100);
if (posPercentage < 50) {
el.addClass('bottomHalfClass')
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).
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
