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

Question

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

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

工作代码段如下。要重现该问题，请使用 'Detect Visibility' 按钮查看屏幕上显示的内容和未显示的内容。向下滚动，使元素位于导航下方，然后再次按 'Detect Visibility' 按钮。

$(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 插件，而是添加了一个小插件，它会告诉您一个元素是否被呈现在它前面的另一个元素 "shielded"。 returns 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);

这里是您发布的工作片段，经过修改以使用插件：

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

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

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

javascript

jquery

visibility

jquery.visible