Как определить, виден ли элемент в окне?

Рейтинг: 1Ответов: 1Опубликовано: 16.09.2014

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

var win = $(window);

$('body').each(function(){
    var el = $(this),
        offsetCoords = el.offset();

    $('div[data-type="background-parallax"]', el).each(function(){
        var parallaxedBackground = $(this);
        win.on('scroll', function(){

        if ( условие про попадание в зону видимости ) {
          var yPosition = (win.scrollTop() / parallaxedBackground.data('speed'));
          if (parallaxedBackground.data('offset')) {
          yPosition += parallaxedBackground.data('offset');}
          parallaxedBackground.css({'background-position': '50%' + (-yPosition) + 'px' });
        }
        });
    });
});

Как решить?

javascript вёрстка
Источник: Stack Overflow на русском

Ответы

▲ 2

Например, такая функция:

function checkVisibility(el){
  var dTop = $(window).scrollTop(),
      dBot = dTop + $(window).height(),
      elTop = $(el).offset().top,
      elBot = elTop + $(el).height();
  return ((elTop <= dBot) && (elTop >= dTop));
}

Смотрим, как её можно использовать. Если надо, то добавьте в расчеты и высоту элемента, который отслеживаете.