javascript - 当用户 "sees"元素时激活 JavaScript？

Question

我有兴趣制作一个类似于此处的统计“评级栏”:http://gdgt.com/improv-electronics/boogie-board/1st-gen/但我不确定我会怎么做。

基本上在页面加载时，它不会激活元素，但当您向下滚动到栏时，它会加载它们。

我将如何按照这些思路继续做某事？

这是我目前的 HTML:

<ul class="product-criteria-bars">
      <li>
    <div class="product-criteria-label">
      Accuracy and sensitivity
    </div>

    <div class="product-criteria-bar">      
      <div class="fill light-green filled" data-width="240" style="width: 240px;"></div>
      <noscript>
        &lt;div class="fill light-green" style="width: 240px;"&gt;&lt;/div&gt;
      </noscript>
    </div>
    <div class="rating light-green">8.0</div>
    <div class="clear"></div>
  </li>
      <li>
    <div class="product-criteria-label">
      Ergonomics / comfort
    </div>

    <div class="product-criteria-bar">      
      <div class="fill light-green filled" data-width="240" style="width: 240px;"></div>
      <noscript>
        &lt;div class="fill light-green" style="width: 240px;"&gt;&lt;/div&gt;
      </noscript>
    </div>
    <div class="rating light-green">8.0</div>
    <div class="clear"></div>
  </li>
  </ul>

但是我还需要做什么，明智的 JS？

Answer 1

您可以使用这个 Jquery 插件和下面的代码来检查

https://github.com/teamdf/jquery-visible/

$('#element').visible()

引用http://www.teamdf.com/web/jquery-element-onscreen-visibility/194/