jquery检查浏览器上的当前div

Question

假设我有一个由10个div组成的非常长的页面： -

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<div id="6"></div>
<div id="7"></div>
<div id="8"></div>
<div id="9"></div>
<div id="10"></div>

我可以使用jquery检查我在900px浏览器高度内查看的当前div吗？

Answer 1

您可以测量每个div顶部的偏移量，并且当前在视口上具有正值的偏移量。为了平滑一点，你可以将div的高度的一半添加到计算中。请参阅下面的代码或查看此jsbin：http://jsbin.com/gahoc/1/edit。

如需更多帮助，请提供完整的HTML（并始终记住ID不应以数字开头）。

HTML：

 <div class="container">
    <div id="c1"></div>
    <div id="c2"></div>
    <div id="c3"></div>
    <div id="c4"></div>
    <div id="c5"></div>
    <div id="c6"></div>
    <div id="c7"></div>
    <div id="c8"></div>
    <div id="c9"></div>
    <div id="c10"></div>
  </div>

CSS：

.container {
  width : 100%;
  height: 900px;
  overflow-y: scroll;
}

.container > div {
  border: 1px solid black;
  margin : 3px auto;
  width : 90%;
  height : 600px;
}

的JavaScript：

var $currentElement = null;

var highlightViewportElement =  function(){

  // reset previous element border
  if ($currentElement){
    $currentElement.css('border', '1px solid black');
  }
  // Iterate trough all the contained divs for their offset on top
  $('.container > div').each(function(){
    var $element = $(this);

    if (($element.offset().top + $element.height()/2)  >= 0){
      $currentElement = $element;
      return false;
    }
  });

  // Demo
  // a styling feedback
  $currentElement.css('border', '1px solid red');
  // outputing active element id
  $('#output').text($currentElement.attr('id'));
};
// Executing for the first time without the help of the scroll or touchmove event
highlightViewportElement();

$('.container').on('touchmove scroll',highlightViewportElement);