показать элемент, когда класс находится в области просмотра

Question

показать элемент, когда класс находится в области просмотра

0

Я пытаюсь сделать div только, когда элементы определенного класса видны в окне просмотра.

Я получил почти все это через http://jsfiddle.net/blowsie/M2RzU/

$(document).ready(function(){
    $('.myclass').bind('inview', function (event, visible) {
      if (visible == true) {
        // element is now visible in the viewport
        $(this).removeClass('myclass');
          alert('found h2!')
      } else {
        // element has gone out of viewport
         $(this).addClass('myclass');
      }
    });
});

но, как вы можете видеть по этому редактированию http://jsfiddle.net/deenbag/6D9x5/, событие запускается каждый раз, когда любой элемент с классом входит или выходит из окна просмотра, поэтому выходящий элемент отключает желаемый эффект, даже если отображается другой элемент с соответствующим классом.

я также возился с этим плагином, но не мог понять, как заставить его применять то, что я хочу делать. http://opensource.teamdf.com/visible/examples/demo-basic.html

milpool 18 фев. 2014, в 00:19

Источник

0

Итак, вы хотите, чтобы элемент оставался видимым, или вы хотите, чтобы он исчез?
Shaho 17 фев. 2014, в 22:45
0

Вы пытаетесь изменить цвет тела? Какой конечный результат вы ищете? Он переопределяется всякий раз, когда элемент уходит, поэтому вам нужно будет проверить, видны ли они при прокрутке. Или вы можете использовать .each () как здесь: jsfiddle.net/6D9x5/2
brouxhaha 17 фев. 2014, в 22:55
0

я пытаюсь создать кнопку, которая появится на моем Tumblr для воспроизведения всех видимых видео сообщений одновременно, но появляется только тогда, когда видео видно
milpool 18 фев. 2014, в 03:02

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

css

viewport

2 ответа

1

Поскольку у меня недостаточно репутации для комментариев, я собираюсь попытаться ответить. Что делать, если вы добавили счетчик, который отслеживал, сколько элементов с классом myclass "находится в поле зрения", и каждый раз при запуске события "inview" вы можете обновить счетчик, и если вы включите 1, если он отключен, если это все, что вы ничего не делаете. Вот мой jsfiddle.

$(document).ready(function(){
    numInView = 0;
    $('.myclass').bind('inview', function (event, visible) {
      if (visible) {
        numInView++;
      } else {
        numInView--;
      }
      if (numInView === 1) {
        // element is now visible in the viewport
        $("h2").removeClass('myclass');
        $('body').css('color','red');
      } else if (numInView === 0) {
        // element has gone out of viewport
        $("h2").addClass('myclass');
        $('body').css('color','black');
      }
    });
});

Pro-tip: при тестировании условия вам не нужно сравнивать его с истинным, если вы не пытаетесь угадать "правдивые" значения (например, число 1), но не верно. Если вещь, которую вы тестируете, истинна, тогда условие будет проходить, не сравнивая его со значением true. Это поможет вам сохранить код:

if (visible == true) {
    bar();
} else {
    bazz();
}

делает то же самое, что и

if (visible) {
    bar();
} else {
    bazz()
}

в этом сценарии.

mpdunson 17 фев. 2014, в 20:31

Ещё вопросы

Итак, вы хотите, чтобы элемент оставался видимым, или вы хотите, чтобы он исчез?
Вы пытаетесь изменить цвет тела? Какой конечный результат вы ищете? Он переопределяется всякий раз, когда элемент уходит, поэтому вам нужно будет проверить, видны ли они при прокрутке. Или вы можете использовать .each () как здесь: jsfiddle.net/6D9x5/2
я пытаюсь создать кнопку, которая появится на моем Tumblr для воспроизведения всех видимых видео сообщений одновременно, но появляется только тогда, когда видео видно

Oriol · Accepted Answer · 2014-02-17T20-53-00.000Z

Просто отслеживайте видимые элементы в массиве:

var visibleEls = [];
$('.myclass').bind('inview', function (event, visible) {
    if (visible == true) {
        // element is now visible in the viewport
        if(!~visibleEls.indexOf(this)) visibleEls.push(this);
    } else {
        // element has gone out of viewport
        var i=visibleEls.indexOf(this);
        if(~i) visibleEls.splice(i, 1);
    }
    $('body').toggleClass('red', !!visibleEls.length);
});

демонстрация

Обратите внимание, что вы можете упростить

var counter = 0;
$('.myclass').bind('inview', function (event, visible) {
    counter += visible*2-1;
    $('body').toggleClass('red', !!counter);
});

но это может быть более подверженным ошибкам.

демонстрация

думал, что это работает, но не относится к элементам в области просмотра до прокрутки? jsfiddle.net/deenbag/6D9x5
@milpool Я никогда не использовал события inview , так что, возможно, есть лучшее решение, но вы можете попробовать запустить document.documentElement.scrollTop += 1 при загрузке
спасибо @oriol! это работало отлично