JavaScript getElementById не работает на мобильном телефоне - PullRequest
Новая
       5

JavaScript getElementById не работает на мобильном телефоне

1 голос
/ 21 февраля 2020

Я создаю веб-сайт с кодом JavaScript. Все это JavaScript отлично работает на компьютере. Но на моем iPhone 7 функция getElementById не работает. Я пытаюсь установить источник тега img, но ничего не происходит.

JavaScript: 

var header_bar = $('.js-header-bar, .js-header-bar-mobile');
var header_bar_mobile = $('.js-header-bar-mobile');
var header_bar_navbar = header_bar_mobile.find('.navbar-primary');
var header_bar_toggler = header_bar_mobile.find('.navbar-toggler');
var header_bar_offsetTop =  header_bar.offset().top;

$(window).on('scroll', onScroll); 
function onScroll(){
    if ($(this).scrollTop() > header_bar_offsetTop){
        header_bar.addClass("sticky");
        document.getElementById("headerLogo").src = "images/logo-black.png";


    } else {
        header_bar.removeClass("sticky");
        document.getElementById('headerLogo').src = "images/logo-white.png";
    }
}

Функция должна добавить в верхней части сайта черный lo go и если я прокручиваю белый lo go. На компьютере это работает, но на моем смартфоне нет.

HTML: 

<header class="header header-mobile js-header-bar-mobile d-md-none">
    <div class="header-bar">
        <div class="header-bar-logo">
            <a href="index.html">
                <img class="originalTest" alt='Auto mit Schriftzug: "Autohandel-ZAR"' id="headerLogo" src="images/logo-white.png"/>
            </a>
        </div>
        <div class="header-bar-menu">
            <button class="navbar-toggler hamburger" type="button" id="js-header-toggle">
                <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                </span>
            </button>
        </div>
    </div>

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 21 февраля 2020

I решил проблему, получив элемент с jQuery по классу, а не по Id, поэтому проблема заключалась в части Id.

Рабочий код: 

function onScroll(){
    if ($(this).scrollTop() > header_bar_offsetTop){
        header_bar.addClass("sticky");
        $(".logoHeader").attr("src", "images/logo-black.png");


    } else {
        header_bar.removeClass("sticky");
        $(".logoHeader").attr("src", "images/logo-white.png");
    }
}
0 голосов
/ 21 февраля 2020

Добавьте дополнительный прослушиватель событий для мобильных устройств: 

$(document.body).on('touchmove', onScroll);

, поэтому полный код должен выглядеть следующим образом: 

var header_bar = $('.js-header-bar, .js-header-bar-mobile');
var header_bar_mobile = $('.js-header-bar-mobile');
var header_bar_navbar = header_bar_mobile.find('.navbar-primary');
var header_bar_toggler = header_bar_mobile.find('.navbar-toggler');
var header_bar_offsetTop =  header_bar.offset().top;

$(document.body).on('touchmove', onScroll);
$(window).on('scroll', onScroll); 
function onScroll(){
    if ($(this).scrollTop() > header_bar_offsetTop){
        header_bar.addClass("sticky");
        document.getElementById("headerLogo").src = "images/logo-black.png";


    } else {
        header_bar.removeClass("sticky");
        document.getElementById('headerLogo').src = "images/logo-white.png";
    }
}
...