Detecting if an element is within the viewport by using jquery.visible.js and an offset

Question

I am using a very small jQuery plugin, jquery.visible.js ( https://github.com/customd/jquery-visible ) to detect if an element is partially visible within the current viewport. Although, I have fixed navigation on the top of the page that causes issues when an element is underneath the navigation. Instead, if an element is under the navigation, I need the plugin to return false instead of true.

How can I add an offset to the plugin of approximately 50px to accommodate for the navigation?

Working snippet is below. To reproduce the problem, use the 'Detect Visibility' button to view what is on screen and what is not. Scroll down so that an element is underneath the navigation, and press the 'Detect Visibility' button again.

 $(function() { // Add the spans to the container element. $('#container dt').each(function() { $(this).append('<span></span>'); }); // Trigger the $('#detect').on('click', function() { // Loop over each container, and check if it's visible. $('#container dt').each(function() { // Is this element visible onscreen? var visible = $(this).visible(true); // Set the visible status into the span. $(this).find('span').text(visible ? 'Onscreen' : 'Offscreen').toggleClass('visible', visible); }); }); }); //JQUERY.VISIBLE.JS PLUGIN (function($) { /** * Copyright 2012, Digital Fusion * Licensed under the MIT license. * http://teamdf.com/jquery-plugins/license/ * * @author Sam Sehnert * @desc A small plugin that checks whether elements are within * the user visible viewport of a web browser. * only accounts for vertical position, not horizontal. */ var $w = $(window); $.fn.visible = function(partial, hidden, direction) { if (this.length < 1) return; var $t = this.length > 1 ? this.eq(0) : this, t = $t.get(0), vpWidth = $w.width(), vpHeight = $w.height(), direction = (direction) ? direction : 'both', clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true; if (typeof t.getBoundingClientRect === 'function') { // Use this native browser method, if available. var rec = t.getBoundingClientRect(), tViz = rec.top >= 0 && rec.top < vpHeight, bViz = rec.bottom > 0 && rec.bottom <= vpHeight, lViz = rec.left >= 0 && rec.left < vpWidth, rViz = rec.right > 0 && rec.right <= vpWidth, vVisible = partial ? tViz || bViz : tViz && bViz, hVisible = partial ? lViz || rViz : lViz && rViz; if (direction === 'both') return clientSize && vVisible && hVisible; else if (direction === 'vertical') return clientSize && vVisible; else if (direction === 'horizontal') return clientSize && hVisible; } else { var viewTop = $w.scrollTop(), viewBottom = viewTop + vpHeight, viewLeft = $w.scrollLeft(), viewRight = viewLeft + vpWidth, offset = $t.offset(), _top = offset.top, _bottom = _top + $t.height(), _left = offset.left, _right = _left + $t.width(), compareTop = partial === true ? _bottom : _top, compareBottom = partial === true ? _top : _bottom, compareLeft = partial === true ? _right : _left, compareRight = partial === true ? _left : _right; if (direction === 'both') return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft)); else if (direction === 'vertical') return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)); else if (direction === 'horizontal') return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft)); } }; })(jQuery); 

 #container { width: 75%; } #floater { position: fixed; width: 22.5%; right: 2.5%; top: 50px; } dt span { float: right; color: orange; } dt span.visible { color: green; } 

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a> </li> <li><a href="#">Link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li class="divider"></li> <li><a href="#">Separated link</a> </li> <li class="divider"></li> <li><a href="#">One more separated link</a> </li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search" /> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li class="divider"></li> <li><a href="#">Separated link</a> </li> </ul> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <div id="container"> <h1>Basic Visibility Detection</h1> <author><a href="http://www.teamdf.com/about/">Sam Sehnert</a> </author> <version>1.0.0 <!-- (<a href="../docs/changelog.html">changelog</a>)--> </version> <license>&#169; Digital Fusion 2012, <a href="http://teamdf.com/jquery-plugins/license/">MIT</a> </license> <p><a href="http://github.com/teamdf/jquery-visible/">Back to GitHub</a> or <a href="http://teamdf.com/web/jquery-element-onscreen-visibility/194/">Back to Blog Article</a> </p> <p>Basic element visibility checking. This example will print 'Onscreen' or 'Offscreen' depending on the location of the element at the time the detection was run.</p> <code class="prettyprint lang-javascript">// Is this element visible onscreen? var visible = $(this).visible( detectPartial ); // Set the visible status into the span. $(this).find('span').text( visible ? 'Onscreen' : 'Offscreen' ).toggleClass('visible',visible); </code> <dl> <dt>One</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Two</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Three</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Four</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Five</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Six</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Seven</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Eight</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Nine</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Ten</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Eleven</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Twelve</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Thirteen</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Fourteen</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Fifteen</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Sixteen</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Seventeen</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Eighteen</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Nineteen</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Twenty</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> </dl> </div> <div id="floater"> <h2>Visibility detection</h2> <button name="detect" id="detect">Detect Visibility</button> </div> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 1

See if this works for you. Instead of modifying the existing $.visible plugin, I added a little plugin that will tell you if an element is "shielded" by another element being rendered in front of it. It returns true if all four corners are shielded, and false if any corner is unshielded.

You could modify the $.visible plugin if you want, but if the original author updates it, you've got to merge your changes with his.

Here's the plugin:

/*
A plugin to detect if any corner of an element is unshielded by another element
being rendered on top of it.

Returns false if at least one corner is unshielded.
Returns true if all four corners have another (non-child) element rendered on top.
*/
(function($) {
  $.fn.shielded = function() {
    var $t = this.length > 1 ? this.eq(0) : this;
    var t = $t.get(0);

    var rect = t.getBoundingClientRect();

    var topRight    = document.elementFromPoint(rect.right, rect.top);
    var topLeft     = document.elementFromPoint(rect.left,  rect.top);
    var bottomRight = document.elementFromPoint(rect.right, rect.bottom-1);
    var bottomLeft  = document.elementFromPoint(rect.left,  rect.bottom-1);


    if( ($t.is( topRight ) || $.contains(t, topRight)) ||
        ($t.is( topLeft ) || $.contains(t, topLeft)) ||
        ($t.is( bottomRight ) || $.contains(t, bottomRight)) ||
        ($t.is( bottomLeft ) || $.contains(t, bottomLeft))  ){
      return(false);
    }else{
      return(true);
    }
  }
})(jQuery);

And here's the working snippet you posted, modified to use the plugin:

 $(function() { // Add the spans to the container element. $('#container dt').each(function() { $(this).append('<span></span>'); }); // Trigger the $('#detect').on('click', function() { // Loop over each container, and check if it's visible. $('#container dt').each(function() { // Is this element visible onscreen? var visible = $(this).visible(true) && !$(this).shielded(); // Set the visible status into the span. $(this).find('span').text(visible ? 'Onscreen' : 'Offscreen').toggleClass('visible', visible); }); }); }); /* A plugin to detect if any corner of an element is unshielded by another element being rendered on top of it. Returns false if at least one corner is unshielded. Returns true if all four corners have another (non-child) element rendered on top. */ (function($) { $.fn.shielded = function() { var $t = this.length > 1 ? this.eq(0) : this; var t = $t.get(0); var rect = t.getBoundingClientRect(); var topRight = document.elementFromPoint(rect.right, rect.top); var topLeft = document.elementFromPoint(rect.left, rect.top); var bottomRight = document.elementFromPoint(rect.right, rect.bottom-1); var bottomLeft = document.elementFromPoint(rect.left, rect.bottom-1); if( ($t.is( topRight ) || $.contains(t, topRight)) || ($t.is( topLeft ) || $.contains(t, topLeft)) || ($t.is( bottomRight ) || $.contains(t, bottomRight)) || ($t.is( bottomLeft ) || $.contains(t, bottomLeft)) ){ return(false); }else{ return(true); } } })(jQuery); //JQUERY.VISIBLE.JS PLUGIN (function($) { /** * Copyright 2012, Digital Fusion * Licensed under the MIT license. * http://teamdf.com/jquery-plugins/license/ * * @author Sam Sehnert * @desc A small plugin that checks whether elements are within * the user visible viewport of a web browser. * only accounts for vertical position, not horizontal. */ var $w = $(window); $.fn.visible = function(partial, hidden, direction) { if (this.length < 1) return; var $t = this.length > 1 ? this.eq(0) : this, t = $t.get(0), vpWidth = $w.width(), vpHeight = $w.height(), direction = (direction) ? direction : 'both', clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true; if (typeof t.getBoundingClientRect === 'function') { // Use this native browser method, if available. var rec = t.getBoundingClientRect(), tViz = rec.top >= 0 && rec.top < vpHeight, bViz = rec.bottom > 0 && rec.bottom <= vpHeight, lViz = rec.left >= 0 && rec.left < vpWidth, rViz = rec.right > 0 && rec.right <= vpWidth, vVisible = partial ? tViz || bViz : tViz && bViz, hVisible = partial ? lViz || rViz : lViz && rViz; if (direction === 'both') return clientSize && vVisible && hVisible; else if (direction === 'vertical') return clientSize && vVisible; else if (direction === 'horizontal') return clientSize && hVisible; } else { var viewTop = $w.scrollTop(), viewBottom = viewTop + vpHeight, viewLeft = $w.scrollLeft(), viewRight = viewLeft + vpWidth, offset = $t.offset(), _top = offset.top, _bottom = _top + $t.height(), _left = offset.left, _right = _left + $t.width(), compareTop = partial === true ? _bottom : _top, compareBottom = partial === true ? _top : _bottom, compareLeft = partial === true ? _right : _left, compareRight = partial === true ? _left : _right; if (direction === 'both') return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft)); else if (direction === 'vertical') return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)); else if (direction === 'horizontal') return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft)); } }; })(jQuery); 

 #container { width: 75%; } #floater { position: fixed; width: 22.5%; right: 2.5%; top: 50px; } dt span { float: right; color: orange; } dt span.visible { color: green; } 

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a> </li> <li><a href="#">Link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li class="divider"></li> <li><a href="#">Separated link</a> </li> <li class="divider"></li> <li><a href="#">One more separated link</a> </li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search" /> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li class="divider"></li> <li><a href="#">Separated link</a> </li> </ul> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <div id="container"> <h1>Basic Visibility Detection</h1> <author><a href="http://www.teamdf.com/about/">Sam Sehnert</a> </author> <version>1.0.0 <!-- (<a href="../docs/changelog.html">changelog</a>)--> </version> <license>&#169; Digital Fusion 2012, <a href="http://teamdf.com/jquery-plugins/license/">MIT</a> </license> <p><a href="http://github.com/teamdf/jquery-visible/">Back to GitHub</a> or <a href="http://teamdf.com/web/jquery-element-onscreen-visibility/194/">Back to Blog Article</a> </p> <p>Basic element visibility checking. This example will print 'Onscreen' or 'Offscreen' depending on the location of the element at the time the detection was run.</p> <code class="prettyprint lang-javascript">// Is this element visible onscreen? var visible = $(this).visible( detectPartial ); // Set the visible status into the span. $(this).find('span').text( visible ? 'Onscreen' : 'Offscreen' ).toggleClass('visible',visible); </code> <dl> <dt>One</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Two</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Three</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Four</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Five</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Six</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Seven</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Eight</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Nine</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Ten</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Eleven</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Twelve</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Thirteen</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Fourteen</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Fifteen</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Sixteen</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Seventeen</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Eighteen</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Nineteen</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> <dt>Twenty</dt> <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd> </dl> </div> <div id="floater"> <h2>Visibility detection</h2> <button name="detect" id="detect">Detect Visibility</button> </div> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>