4

I'm trying to calculate a percent number (0.0 - 2.0/0% - 200%) so that I can change the opacity of a div as it comes in and out of view.

  • When the window is above the viewable area, the percent is at or less than 0
  • When the window is at the exact center of the viewable area, the percent is 1.0
  • And when the window is below the viewable area, the percent is 2.0 and up

And while scrolling in and out of view, it would be a portion thereof.

Somehow I need compare the window's vertical center to the area's vertical center, but I'm having a hard time getting the calculations right.

So far I have

var p = {
    scrollTop: $(window).scrollTop(),
    documentHeight: $(document).height(),
    windowHeight: $(window).height(),
    contentTop: $('.content').position().top,
    contentHeight: $('.content').height()
};

if (p.windowHeight / 2 + p.scrollTop < p.contentHeight / 2 + p.contentTop) {

    p.percent = (p.windowHeight / 2 + p.scrollTop) / (p.contentHeight / 2 + p.contentTop);
}
else if (p.windowHeight / 2 + p.scrollTop > p.contentHeight / 2 + p.contentTop) {

    p.percent =  (p.windowHeight / 2 + p.scrollTop) / (p.contentHeight / 2 + p.documentHeight - p.contentHeight - p.contentTop);
}
else p.percent = 1;

$('.content').animate({
    opacity: 1 - Math.abs(p.percent - 1)
}, 1);

But I'm not factoring in the document height, so I know I'm missing something. I also feel this could be done in one equation, without the if/else

Here's a non-functioning fiddle I'm working on: http://jsfiddle.net/nxdTn/


To better demonstrate, see below examples.

Yellow is the document, the transparant grey is the window, and the blue is the viewable area.

Blue would be at 0 opacity: enter image description here

At 100% opacity: enter image description here

And back to 0: enter image description here

1 Answer 1

5

There's many ways to skin a cat, but personally I would try to determine some bounds on what the values for scrollTop will be when content enters and exits the window and then just calculate scrollTop's position in relation to those bounds. No center points or document's height needed.

One minor change I had to make to your CSS was to remove the margin from content and add it as padding to body. The margin was treating content as if it's position.top() value was 0.

var p = {
    scrollTop: $(window).scrollTop(),
    windowHeight: $(window).height(),
    contentTop: $('.content').position().top,
    contentHeight: $('.content').height()
};

// determine scrollTop's bounds where content enters & exits the window
p.lowerBound = p.contentTop - p.windowHeight;
p.upperBound = p.contentTop + p.contentHeight;

// determine scrollTop's position percentage (x2) in relation to bounds
p.percent = (p.scrollTop - p.lowerBound) / (p.upperBound - p.lowerBound) * 2;

You can see a working demo here: http://jsfiddle.net/GoranMottram/nxdTn/3/

Hope it's what you're looking for.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.