Начать выполнять скрипт после появления на экране.

[D'Jack]

Привет, вопрос вообщем то в следующем:

https://jsfiddle.net/ywg6eztb/2/

Есть скрипт обратного отсчета, который запускается при загрузки страницы.

По факту имеем длинный лендинг, и хотим что бы скрипт обратного отсчета запускался, только когда посетитель увидит на экране это число, а не как сейчас сразу после загрузки старницы.

 

[Get-Web]

Для просмотра ссылки Войди или Зарегистрируйся эта библиотека отлично подходит для таких целей

 

[D'Jack]

Для просмотра ссылки Войди или Зарегистрируйся эта библиотека отлично подходит для таких целей

Подскажите, как их совокупить?

 

[Get-Web]

Подключаем библиотеку

Один из вариантов:
Создаем новый поинт

var waypoint = new Waypoint({
  element: document.getElementById('pick-three'), // Это элемент который должен оказаться в поле видимости чтобы запустился ваш скрипт
  handler: function(direction) {
    if (direction === 'down') { // Это условие, если страница прокручивает вниз, то выполняем код внутри
      Тут вызываем ваш скрипт (например: Go(); )
    }
  },
  offset: '50%' // означает что скрипт запуститься когда верхняя граница блока 'pick-three' будет достигнута середины экрана
})

Вообще погулите примеров много, только ищите те что посвежее так как библиотека недавно обновилась и приемы вызова изменились.

 

[apostos]

В jQuery есть то что вам нужно: Для просмотра ссылки Войди или Зарегистрируйся

Обрабатываете событие условием и готово

 

[passwd]

Вот пример на JQuery:

function getViewportOffset($e) {
  var $window = $(window),
    scrollLeft = $window.scrollLeft(),
    scrollTop = $window.scrollTop(),
    offset = $e.offset(),
    rect1 = { x1: scrollLeft, y1: scrollTop, x2: scrollLeft + $window.width(), y2: scrollTop + $window.height() },
    rect2 = { x1: offset.left, y1: offset.top, x2: offset.left + $e.width(), y2: offset.top + $e.height() };
  return {
    left: offset.left - scrollLeft,
    top: offset.top - scrollTop,
    insideViewport: rect1.x1 < rect2.x2 && rect1.x2 > rect2.x1 && rect1.y1 < rect2.y2 && rect1.y2 > rect2.y1
  };
}
$(window).on("load scroll resize", function() {
  var viewportOffset = getViewportOffset($("#element"));
  $("#log").text("left: " + viewportOffset.left + ", top: " + viewportOffset.top + ", insideViewport: " + viewportOffset.insideViewport);
});

body { margin: 0; padding: 0; width: 1600px; height: 2048px; background-color: #CCCCCC; }
#element { width: 384px; height: 384px; margin-top: 1088px; margin-left: 768px; background-color: #99CCFF; }
#log { position: fixed; left: 0; top: 0; font: medium monospace; background-color: #EEE8AA; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- scroll right and bottom to locate the blue square -->
<div id="element"></div>
<div id="log"></div>