Проверьте, существует ли var в JavaScript, чтобы избежать неопределенной ошибки .top

Question

На моей домашней странице у меня есть видео модуль и следующие анимированные ниже JS в этих cards.

Все мои JS минимизируются, поэтому при переходе на страницу, на которой нет этого модуля, я получаю Cannot read property 'top' of undefined ошибки.

Чтобы предотвратить это, я пытаюсь проверитьесли переменная существует до выполнения скрипта, но она не работает. Почему не работает следующее:

var scrolled = false;

$(window).on('scroll', function() {
    scrolled = true;
});



function loadCards() {
    if (scrolled) {
      var wScroll = $(this).scrollTop();

      if(wScroll > $('.vidCard').offset().top - ($(window).height() / 1.5)) {

       $('.vidCard').each(function(i){

         setTimeout(function(){
           $('.vidCard' ).eq(i).addClass('is-showing');
         }, 150 * (i+1));
       });

      }
    }

}


$(window).scroll(function() {
  loadCards();
});

$(function() {
  loadCards();
});

Answer 1

Я думаю, что ключевое слово this, которое вы используете в var wScroll = $(this).scrollTop();, является причиной проблемы. Если вы хотите scrollTop любого элемента, напишите селектор элемента (я думаю, что здесь window ). Кроме того, если вы хотите, чтобы это работало в первый раз, то вы должны написать другой алгоритм, который прокручивается переменная не ложь там в первый раз.

НоЯ смотрю на фрагмент ниже:

Краткое описание: У нас есть функция isVisible , которая обнаруживает, видим ли элемент только в секции окна (не над ним и нениже). Также при каждой прокрутке ограничивайте область поиска, выбирая vidCard s, которые не имеют класса is-showing (при использовании этого подхода обнаружение будет быстрее, а анимация будет плавной и не займет много времени для отображения!). Я предположил, что is-showing имеет эффект непрозрачности.

Надеюсь, это поможет:)

function isVisible(el) {
  var $el = $(el),
    above = $el.offset().top - $(window).scrollTop() + $el.outerHeight() < 0,
    below = $el.offset().top > $(window).outerHeight() + $(window).scrollTop();
  return !above && !below;
}

function loadCards() {
  $('.vidCard:not(.is-showing)').each(function(i) {
    var card = $(this);

    if (isVisible(card) && !card.hasClass('is-showing')) {
      setTimeout(function() {
        card.addClass('is-showing');
      }, 150 * (i + 1));
    }
  });
}

$(window).on('scroll', function() {
  loadCards();
});

loadCards();

.vidCard {
  width: 100px;
  height: 100px;
  background-color: #eee;
  margin-bottom: 20px;
  opacity: 0;
}

.is-showing {
  opacity: 1;
  -webkit-transition: all ease 0.6s;
  -moz-transition: all ease 0.6s;
  -ms-transition: all ease 0.6s;
  -o-transition: all ease 0.6s;
  transition: all ease 0.6s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vidCard"></div>
<div class="vidCard"></div>
<div class="vidCard"></div>
<div class="vidCard"></div>
<div class="vidCard"></div>
<div class="vidCard"></div>
<div class="vidCard"></div>
<div class="vidCard"></div>
<div class="vidCard"></div>
<div class="vidCard"></div>
<div class="vidCard"></div>
<div class="vidCard"></div>
<div class="vidCard"></div>
<div class="vidCard"></div>
<div class="vidCard"></div>
<div class="vidCard"></div>
<div class="vidCard"></div>
<div class="vidCard"></div>
<div class="vidCard"></div>
<div class="vidCard"></div>

Answer 2

Используйте offsetTop вместо .offset (). Top

Этот ответ может помочь вам: offsetTop против jQuery.offset (). Top