使用jquery.visible.js和偏移量检测元素是否在视口中

Question

我正在使用一个非常小的jQuery插件jquery.visible.js（https://github.com/customd/jquery-visible）来检测元素在当前视口中是否部分可见。虽然，我已经在页面顶部修复了导航，导致元素位于导航下方时出现问题。相反，如果元素在导航下，我需要插件返回false而不是true。

如何为插件添加大约50px的偏移量以适应导航？

工作片段如下。要重现此问题，请使用“检测可见性”按钮查看屏幕上显示的内容和不显示内容的内容。向下滚动以使元素位于导航下方，然后再次按“检测可见性”按钮。

$(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

看看这是否适合您。我没有修改现有的$.visible插件，而是添加了一个小插件，它会告诉您元素是否被屏蔽＆＃34;由另一个元素呈现在它前面。如果所有四个角都被屏蔽，则返回true;如果任何角落未被屏蔽，则返回false。

如果需要，您可以修改$.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);

这是您发布的工作代码段，已修改为使用该插件：

＆＃13;

＆＃13;

$(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);

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;