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/

Answer 2

查看http://media.gdgt.com/assets/js/provisionals/product/index-31733.js

中的isVisibleInViewport()功能

看起来该网站正在滚动时使用侦听器来检查可见性。

当用户“看到”元素时激活JavaScript？

2 个答案: