Активировать 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/

Answer 2

Проверьте свою функцию isVisibleInViewport() в http://media.gdgt.com/assets/js/provisionals/product/index-31733.js

Похоже сайт используя прослушиватель для прокрутки для проверки видимости.