JS window.addEventListener работает только на одной странице

Question

У меня есть JavaScript, если элемент находится на экранной функции, которая вызывается window.addEventListener. Когда указан определенный c div, классы CSS добавляются (из Animate CSS) в элемент div. Код работает только на одной странице моего сайта, а не на других.

Я получаю эту консольную ошибку только на второй странице (где JS не работает)

TypeError: $elem.offset(...) is undefined

URL проекта Live :

// Element In View function

function isOnScreen(elem) {
    // if the element doesn't exist, abort
    if (elem.length == 0) {
        return;
    }
    var $window = jQuery(window)
    var viewport_top = $window.scrollTop()
    var viewport_height = $window.height()
    var viewport_bottom = viewport_top + viewport_height
    var $elem = jQuery(elem)
    var top = $elem.offset().top
    var height = $elem.height()
    var bottom = top + height

    return (bottom > viewport_top) && (top < viewport_bottom)
}

// Animation when element is in view

window.addEventListener('scroll', function (e) {
    if (isOnScreen('#lfdesign')) {
        $("#lfdesign .flexcontainer").addClass("animated slower bounceInRight");
    }
    if (isOnScreen('#books')) {
        $("#books .flexcontainer").addClass("animated slower bounceInLeft");
    }
    if (isOnScreen('.srp-color')) {
        $(".srp-color .flexcontainer").addClass("animated slower bounceInRight");
    }
    if (isOnScreen('.nescol-color')) {
        $(".nescol-color .flexcontainer").addClass("animated slower bounceInLeft");
    }
    if (isOnScreen('.worldskills-color')) {
        $(".worldskills-color .flexcontainer").addClass("animated slower bounceInRight");
    }
    if (isOnScreen('.silvernote-color')) {
        $(".silvernote-color .flexcontainer").addClass("animated slower bounceInLeft");
    }
});

CSS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

HTML

<section class="left silvernote-color">

    <div class="flexcontainer">

        <div class="flex-item">

            <a href="webdesign/silvernote">

                <img class="normal" src="img/silvernote-logo.png" alt="The logo for SilverNote, a music enterprise hub in Aberdeen who I helped to create a responsive site for by adding artist profiles with a team of developers">

            </a>

        </div>

        <div class="flex-item">

            <p>SilverNote Music is a music enterprise hub in Aberdeen that want to promote new music. They tasked me and three others to work as a team to create a responsive site that catered to those viewing on computers as well as a younger, mobile audience.</p>

            <p>My main responsibilities were communicating with our client and developing the artist page. I pitched the prototype to the wider organisation and gathered feedback from the band members. This feedback informed the music players I created on the artist profiles.</p>

        </div>

    </div>

</section>

Answer 1

Исправлено использование плагина jQuery .inview .

Answer 2

Причина, по которой вы видите TypeError: $elem.offset(...) is undefined, заключается в том, что вы пытаетесь вызвать метод offset для элемента, который не существует на вашей странице.

Вы должны изменить свою логику c, которая проверяет, существует ли элемент. В настоящее время ваша функция isOnScreen принимает строку в качестве аргумента и проверяет, является ли length этого string 0 - это фактически не проверяет, находится элемент на странице или нет.

function isOnScreen(elem) {
  if (elem.length == 0) {
    return
  }
}

window.addEventListener(`scroll`, function (e) {
  if (isOnScreen(`#lfdesign`) {
    // passing a string and checking it's length
    // inside the `isOnScreen` function doesn't tell
    // you if this element is on the page or not
  }
})

Вместо этого вам следует сначала попытаться найти / найти элемент с помощью jQuery, если вы этого хотите, и проверить, существует ли он. Если это так, делайте все, что вам нужно, иначе return рано.

function isOnScreen(selector) {
  var el = $(selector)
  
  if (el.length !== 1) {
    console.log(`element ${selector} does not exist!`)
    return;
  }
  console.log(`element ${selector} exists!`)
  // do work
}

// inside of `window.addEventListener` callback function

if (isOnScreen("#lfdesign")) {
 // do work
}

if (isOnScreen("#books")) {
  // do work
}

if (isOnScreen(".srp-color")) {
  // do work
}

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

<div id="lfdesign">
  <h4>My ID is <b>lfdesign</b>!</h4>
</div>
<div id="books">
  <h4>My ID is <b>books</b>!</h4>
</div>

Одно замечание, которое я хотел бы сделать, это то, что window.addEventListener("scroll", callback) будет вызываться много за короткий промежуток времени, что может вызвать проблемы с производительностью. Если вы сталкиваетесь с проблемами с производительностью, вы должны взглянуть на throttling и / или debouncing:

• Разница между регулированием и отладкой - CSS Трюки

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