is there way check if specified html element in viewport - no window specified div? found 1 meaningful solution can't make work me.
according question check if element visible in div
i created example here: http://jsfiddle.net/jm91n80u/
this html code:
<body style="overflow:hidden;"> <div id="outer" style="position:absolute;left:150px;top:20px;right:100px;bottom:30px;overflow:hidden;border:1px solid blue;"> <div id="inner" style="position:relative;height:300px;border:1px solid red;width:100px;overflow-y:auto;overflow-x:hidden;"> <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">1</div> <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">2</div> <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">3</div> <div style="position:relative;width:100%;height:30px;border:1px solid grey;background:yellow;" class="test" id="id1">4</div> <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">5</div> <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">6</div> <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">7</div> <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">8</div> <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">9</div> <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">10</div> <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">11</div> <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">12</div> <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">13</div> <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">14</div> </div> </div> <div id="result" style="position:absolute;bottom:0px;overflow:hidden;border:1px solid black;height:20px;width:100%;"></div> </body> this js function
$(document).ready(function () { $.belowthefold = function (lookin, elements, settings) { var fold = $(lookin).height() + $(lookin).scrolltop(); return $(elements).filter(function () { return fold <= $(this).offset().top - settings.threshold; }); }; $.abovethetop = function (lookin, elements, settings) { var top = $(lookin).scrolltop(); return $(elements).filter(function () { return top >= $(this).offset().top + $(this).height() - settings.threshold; }); }; $.rightofscreen = function (lookin, elements, settings) { var fold = $(lookin).width() + $(lookin).scrollleft() + $(lookin).offset().width; return $(elements).filter(function () { return fold <= $(this).offset().left - settings.threshold; }); }; $.leftofscreen = function (lookin, elements, settings) { var left = $(lookin).scrollleft(); return $(elements).filter(function () { return left >= $(this).offset().left + $(this).width() - settings.threshold; }); }; $("#inner").scrolltop(100); var b = $.belowthefold("#inner", ".test", { threshold: 0 }).toarray(); var t = $.abovethetop("#inner", ".test", { threshold: 0 }).toarray(); var r = $.rightofscreen("#inner", ".test", { threshold: 0 }).toarray(); var l = $.leftofscreen("#inner", ".test", { threshold: 0 }).toarray(); var el = $("#id1")[0]; var bs = "below fold : "; (var = 0; < b.length; i++) { bs += $(b[i]).html() + ","; } var ts = "above top : "; (var = 0; < t.length; i++) { ts += $(t[i]).html() + ","; } var rs = "right of screen : "; (var = 0; < r.length; i++) { rs += $(r[i]).html() + ","; } var ls = "left of screen : "; (var = 0; < l.length; i++) { ls += $(l[i]).html() + ","; } console.log(bs); console.log(ts); console.log(rs); console.log(ls); }); what i'm trying '.test' elements invisible (or partial invisible in target solution, switch appreciated) in inner container information position. result of should be:
below fold : 13, 14
above top : 1,2,3,4
right of screen :
left of screen :
but in particular case functions doesn't work. tried use several other solutions, each 1 treats viewport window.
can explain doing wrong? appreciated.
you should compare div's positions to: viewport size , windows bounds.
roughly : if(div.top > (window.top + viewport.height )) {/*this visible*/} else {/*this not visible*/}
you make more specific (how area of div ?) if((div.top **+ 50% of div.height**) > (window.top + viewport.height )) {/*this visible*/}
this post gives codes check if element between 30% , 60% of viewport
$(document).ready(function() { // viewport height, gridtop , gridbottom var windowheight = $(window).height(), gridtop = windowheight * .3, gridbottom = windowheight * .6; $(window).on('scroll', function() { // on each scroll check if `li` in interested viewport $('ul li').each(function() { var thistop = $(this).offset().top - $(window).scrolltop(); // `top` of `li` // check if element in interested viewport if (thistop >= gridtop && (thistop + $(this).height()) <= gridbottom) { $(this).css('background', 'red'); } else { $(this).css('background', 'gray'); } }); }); });
Comments
Post a Comment