Question

我正在进行布局工作，您可以通过以下链接直观地想象：

固定标头是position: fixed的div。这意味着，滚动过程会隐藏其下的元素（这就是为什么它在我的图像上透明以用于说明目的）。我需要跟踪页面上垂直顶部元素（其他div）的列表，这些元素仍然可见。使用我的布局示例，我需要一个red元素列表。它们可以以任何方式定位。

预期的结果是JavaScript函数，它返回一个元素数组。在幕后，解决方案应该肯定跟踪window.onScroll事件，并以某种方式有效地保持以最快的方式获取结果的能力。

Answer 1

如果所有红色div都属于同一个父级，则可以执行此操作：

$(window).scroll(function() {
    $('#parentDiv').children().each(function () {

        if($(this).position().top + $(this).outerHeight() < $("#parentDiv").position().top + $("#parentDiv").outerHeight()) {
             // add them to array
        }

    });
})

这将在每次滚动页面时运行，然后迭代父div的子项（这很昂贵，但如果您动态地向页面添加元素，那么这也可以轻微调整）。 / LI>
检查每个孩子的底部位置，并将其与固定标题的底部位置（top + outerHeight）进行比较，如果为true，则元素bottom低于标题的底部，因此位于标题的下方
如果您愿意，请按照您的意愿行事，如果愿意，可以将他们的Jquery引用添加到数组中。

Answer 2

我创建了函数getDivs，它将返回带有特定div的jQuery对象。

您可以将函数内的$allDivs变量编辑为您要检查的任何jQuery对象

请查看下面的代码段：

var
$allDivs = $('#container > .column > div'), // Divs you want to check
$header = $('#header');

function getDivs() {
  return $allDivs
  .filter(function() {
    var
    $this = $(this),
    top = parseInt($this.offset().top, 10),
    bottom = top + $this.outerHeight(),
    scrTop = $header.offset().top + $header.outerHeight();

    if (top <= scrTop && bottom >= scrTop)
      return true;
    else
      return false;
  });
}

$allDivs.removeClass('under');
getDivs()
.addClass('under');

$(window).scroll(function() {
  $allDivs.removeClass('under');
  
  getDivs()
  .addClass('under');
  
})

body {
  height: 1300px;
}

#header {
  width: 100%;
  padding: 50px;
  box-sizing: border-box;
  position: fixed;
  top: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.3);
}

.column {
  float: left;
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

.column > div {
  height: 100px;
  width: 100px;
  border: 1px solid green;
  flex: 1 1 100px;
}

#col1 { margin: 100px 0 0; }

#col3 { margin: 30px 0 0; }

#col1 > div { flex: 1 1 75px; }

#col2 > div { flex: 1 1 200px; }

.under { background: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  Header
</div>
<div id="container">
  <div id="col1" class="column">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div id="col2" class="column">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div id="col3" class="column">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

在固定标题下跟踪顶部可见div列表的最快方法是什么？

2 个答案: