1

Trying to know when an element is most visible in the viewport and is mostly in the center. I'd like to have all the other divs fade off but keeping the more dominant DIV at full opacity as you scroll.

I found this: http://patik.com/code/within-viewport/ but it's by pixel and doesn't have the logic I require for this to work like in the image below.

enter image description here

Tom
  • 1,095
  • 2
  • 12
  • 30

2 Answers2

3

You would need a method that tested whether an element was fully within the bounds of the page. There are plugins that do this such as Remy Sharp's Element in-view Event Plugin or this by Digital Fusion but essentially you just need to test if an element is fully in view and add a class to it.

All relatively simple (although I confess to have not tested this x-browser so YMMV):

function testInView($el){
    var wTop = $(window).scrollTop();
    var wBot = wTop + $(window).height();
    var eTop = $el.offset().top;
    var eBot = eTop + $el.height();
    return ((eBot <= wBot) && (eTop >= wTop));
}
function setInView(){
    $("div").each(function(){//testing EVERY div (you might want to be more specific in your implementation)
        var $zis = $(this);
        $zis.removeClass("inview");
        if(testInView($zis)){
           $zis.addClass("inview");   
        }
    });
}
$(document).scroll(function(){
    setInView();
});
$(document).resize(function(){
    setInView();
});
$(document).ready(function(){
    setInView();
});

Here's the jsFiddle

Moob
  • 14,420
  • 1
  • 34
  • 47
  • sure, use JQuery, because the native implementation is lame.... ( i am just being mean ) – helly0d Mar 10 '14 at 15:51
  • 2
    @helly0d - I agree with your sentiment. I was just being lazy in using jQuery ;) – Moob Mar 10 '14 at 15:55
  • This is amazing... thank you. I couldn't wrap my head around the logic of finding each div's position relative to scroll, but knowing which DIV was mostly inview. Thank you. – Tom Mar 10 '14 at 15:56
  • Ah the only problem I found with this solution is there is a slight gap where nothing is being added the 'inview' class. – Tom Mar 10 '14 at 15:58
  • i really love the path that SO got to.... ScriptKiddies for the win. How can i do this? ( with no effort shown ) Here's how... ( 20 points rep gained ) But when you actually give them just a hint so that they will learn something from it all you get is a downvote ( OMG this noob doesn't know that i need za code not another wikipedia answer ) – helly0d Mar 10 '14 at 15:58
  • @helly0d I upvoted you, I'm just reading about `getBoundingClientRect`. Pretty awesome stuff, thanks! – Tom Mar 10 '14 at 16:02
  • 1
    @Tom - at some points there may be no single element that its FULLY in view. You could perform extra tests to determin which of the elements is the *most* in view or you could take the easy way out as [I have here](http://jsfiddle.net/moob/4RXYG/2/) and just add an offset that allows the element to be so many pixels outside of the bounds. – Moob Mar 10 '14 at 16:11
  • @moob I think the biggest problem now is because we are reading the height and top of the DIV, if the DIV is longer than the window, this won't work. – Tom Mar 10 '14 at 17:06
  • 2
    @Tom You could adapt the script to check whether the element is over the mid-point of the page E.G http://jsfiddle.net/moob/4RXYG/7/ – Moob Mar 10 '14 at 17:59
1

Over the scroll event you can test each div in the container if it has the bounding rectangle ( use getBoundingClientRect function over each div from container ) in the required zone. Also here you can test to see how much of this rectangle is visible by some simple formulas, and set the opacity accordingly.

helly0d
  • 828
  • 2
  • 10
  • 27