-1

Вот js для смены класса про скролле.

<script>
document.onscroll = function (event) {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    console.log(scrollTop);
    if(scrollTop > 300) {
        var el = document.getElementsByClassName('menu-mp')[0];

        el.className = 'menu-mp2';

    }
    else if(scrollTop < 300) {
        var el = document.getElementsByClassName('menu-mp2')[0];

        el.className = 'menu-mp';

    }

}

Но при прокрутке возникает бесконечное количество ошибок. Ругается на строчку

el.className = 'menu-mp2'

и на строчку

el.className = 'menu-mp';

2 ответа 2

0

Потому, что document.getElementsByClassName('menu-mp') возращает пустой массив. То есть не найден элемент с классом menu-mp. Далее вы из пустого массива берёте первый элемент и получаете undefined, вместо HTMLElement. Потом пытаетесь в undefined в свойство className что-то присвоить. В итоге возникает эта ошибка.

3
  • Отличный ответ! А можете еще посоветовать, как от ошибки избавиться? 16 мая 2018 в 6:24
  • Но как получается, что элемент не найден, если скрипт выполняется? 16 мая 2018 в 6:28
  • А что должно мешать скрипту выполняться? Сделайте так, что бы функция getElementsByClassName возвращала хотя бы один элемент. Что для этого нужно, я, разумеется, не знаю. Может быть у вас css-селектор неправильно написан. Может элемент отсутствует на странице. Разбирайтесь
    – vihtor
    16 мая 2018 в 7:04
0

В итоге работает без проблем вот такой код. Надеюсь кому-то пригодится!

jQuery(document).ready(function($) {
//caches a jQuery object containing the header element
var header = $(".menu-mp");
$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll > 300) {
        header.removeClass('menu-mp').addClass("menu-mp2");
    } else {
        header.removeClass("menu-mp2").addClass('menu-mp');
    }
});
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.